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

Question

我有一个带有 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 而不是克隆的行。希望很快到你这里。非常感谢

Answer 1

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

使用相对路径更容易。例如，当你想添加一个依赖项时，说 'find a dependent input to clone and place it inside the container from where I clicked this add-dependent button' 更容易——而且不需要 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>

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

Clone <div> and change onclick code of inner button

javascript

clonenode