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

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 受哪个按钮等影响。

使用相对路径更容易。例如，当您想添加一个依赖项时，更容易说“找到一个依赖项输入以克隆并将其放置在我单击此添加依赖项按钮的容器中”——而 walla 不需要 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>