克隆<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 而不是克隆的 div。 希望很快就到這里。 非常感謝

Answer 1

我對您的代碼進行了許多更改，我將嘗試在此處進行解釋。 當您處理復制、附加、刪除等操作時，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>