克隆 <div> 并更改内部按钮的 onclick 代码

问题描述

我有一个 id="add-dependent" 的 div，包括 2 行和 div 内的一个按钮（添加依赖）。单击“添加依赖”按钮时，第一行将被克隆并插入（添加依赖）按钮之前。实际上，我在 div 之外还有一个名为（添加申请人）的按钮，通过单击它，整个 div 将被克隆并添加到（添加申请人）按钮之前。我的代码是这样的：

 let nextLabel=2
    let nextId=1
function addApplicant(){
            var elem= document.querySelector("#add-dependent");
            var clone=elem.cloneNode(true);
            var add= document.getElementById("add-applicant");
    clone.id = "add-dependent"+nextLabel;
            elem.parentElement.insertBefore(clone,add);
      var label = clone.querySelector("label");
  label.innerHTML = '<button  class="close remove"  onClick="$(this).parent().parent().parent().parent().remove()">x</button>' + "Applicant " + (nextLabeL++) ;
     
        } 
    
  
        
        
    
        function addDependent(){
            var elem= document.querySelector(".dependent");
            var clone=elem.cloneNode(true);
            var add= document.getElementById("dependent");
            elem.parentElement.insertBefore(clone,add);
            var label=clone.querySelector('label');
            label.innerHTML= '<button id="btn" name="btn" type="button" class="close float-left" style="font-size:12px;" onClick="$(this).parent().parent().parent().remove();" >x</button>';
             
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="add-dependent">
        <div class="form-row dependents">
            <div>
                <label class="text-left" contenteditable="true">Applicant 1: </label>
            </div>
            <div >
                  <input   type="number" placeholder="age">
            </div>
        </div>
        <div class="form-row dependent">
            <div>
                <button id="btn" name="btn" type="button" class="close " onClick="$(this).parent().parent().remove();" >x</button>
            </div>
            <div>
                  <input  type="number"  placeholder="age">
            </div>
        </div>
        <button id="dependent" onClick="addDependent()">Add dependent</button>
    </div>
  
    <button id="add-applicant" onClick="addApplicant()">Add applicant</button>

我的问题是当我在克隆的 div 中单击（添加依赖项）时，该行被添加到主 div 而不是克隆的 div。希望很快就到这里。非常感谢

解决方法

我对您的代码进行了许多更改，我将尝试在此处进行解释。当您处理复制、附加、删除等操作时，id 可能会变得难以处理 - 您不能有重复的 ID，然后您的代码必须跟踪哪个 id 受到哪个按钮等的影响。

使用相对路径要容易得多。例如，当您想添加依赖项时，更容易说“找到要克隆的依赖项输入并将其放置在我单击此添加依赖项按钮的容器内”-并且不需要 id。为了找到相对的 div，我使用了 event.target、closest() 和 querySelctor 的组合 - 像这样：

e.target
   .closest('.add-applicant-container')
   .querySelector('.dependents')
   .append(clone);

这表示从我点击的按钮开始，找到最近的“.add-applicant-container”，然后在里面找到第一个“.dependents”，然后将我们的克隆放在后面

最后是按钮。由于您在此过程中创建和销毁这些按钮，因此最好在 document 上设置侦听器并测试以查看单击了哪个按钮。这称为event delegation。对于依赖的删除按钮，我们只需要找到相关的元素并删除即可：

if (e.target.classList.contains('close')) {
    e.target.closest('.dependent-container').remove()
  }

let nextLabel = 2
let nextId = 1
document.addEventListener('click',function(e) {
  if (e.target.classList.contains('add-applicant')) {
    addApplicant(e)
  } else if (e.target.classList.contains('btn-dependent')) {
    addDependent(e) 
  } else if (e.target.classList.contains('remove-applicant')) {
    e.target.closest('.add-applicant-container').remove()
  } else if (e.target.classList.contains('close')) {
    e.target.closest('.dependent-container').remove()
  }
})

function addApplicant(e) {
  let applicant = document.querySelector('.add-applicant-container')
  var clone = applicant.cloneNode(true);
  clone.id = "add-dependent" + nextLabel;
  clone.querySelectorAll('.dependent-container').forEach((el,i) => {
    if (i !== 0) el.remove()
  })
  applicant.parentElement.insertBefore(clone,e.target);
  var label = clone.querySelector("label");
  label.innerHTML = '<button  class="close remove-applicant">x</button>' + "Applicant " + (nextLabel++);
}

function addDependent(e) {
  let dependent = document.querySelector('.dependent-container')
  var clone = dependent.cloneNode(true);
  e.target.closest('.add-applicant-container').querySelector('.dependents').append(clone);
  // var label = clone.querySelector('label');
  //  label.innerHTML = '<button id="btn" name="btn" type="button" class="close float-left" style="font-size:12px;" >x</button>';

}

.add-applicant-container{
padding:10px;
}

.dependent-container{
padding:5px 0 ;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-applicant-container">
  <div class="form-row dependents">
    <div>
      <label class="text-left" contenteditable="true">Applicant 1: </label>
    </div>
    <div>
      <input type="number" placeholder="applicant age">
    </div>
  </div>
  <div class="form-row dependent-container">
    <div>
      <input type="number" placeholder="dependent age"> <button id="btn" name="btn" type="button" class="close ">x</button>
    </div>
  </div>
  <button class="btn-dependent">Add dependent</button>
</div>

<button class="add-applicant">Add applicant</button>

clonenode javascript