如何分别删除每个 DOM 元素

Question

我有一个按钮，可以在单击时创建两个输入字段。 他们还生成了一个很棒的字体垃圾图标，当用户单击该图标时，这两个字段必须被删除。 目前我的代码在单击字体真棒图标时删除了所有输入，我怎样才能使只有属于该图标的那两个被删除而不是全部？ 这是我的尝试：

  createNewPricedRoundShareholder() {
      var newPlatformNameInputContainer = document.getElementById(
        "round-shareholder-container"
      );

      const newPlatformNameInput = document.createElement("input");
      newPlatformNameInput.classList.add("form-control");
      newPlatformNameInput.classList.add("input");
      newPlatformNameInput.classList.add("dynamic-input");
      newPlatformNameInput.placeholder = "Username";
      newPlatformNameInput.setAttribute("type", "text");
      newPlatformNameInput.setAttribute("name", "username");

      newPlatformNameInputContainer.appendChild(newPlatformNameInput);

      var secondContainer = document.getElementById(
        "round-investment-container"
      );

      const newInitialOptionsPool = document.createElement("input");
      newInitialOptionsPool.classList.add("form-control");
      newInitialOptionsPool.classList.add("input");
      newInitialOptionsPool.classList.add("dynamic-input");
      newInitialOptionsPool.placeholder = "Investment";
      newInitialOptionsPool.name = "investment";
      newInitialOptionsPool.setAttribute("type", "text");
      newInitialOptionsPool.setAttribute("name", "investment");
      secondContainer.appendChild(newInitialOptionsPool);
      secondContainer.innerHTML += '<i class="fas fa-trash"></i>';

      document.querySelectorAll(".fa-trash").forEach( 
      function(el){
           el.addEventListener('click', function() {
                  var investmentInput = document.querySelector("#round-shareholder-container");
        investmentInput.parentNode.removeChild(investmentInput);

        var usernameInput = document.querySelector("#round-investment-container");
        usernameInput.parentNode.removeChild(usernameInput)
           })
      }
)

我还尝试像这样获取每个输入目标：

var A = el.target.parentNode;
A.removeChild(A); 

那仍然没有用

Answer 1

您需要某种标识来将每一行输入和垃圾桶图标与其他行分开。 当用户单击垃圾桶图标时，您使用该标识符来识别要删除的行。 在当前的代码删除功能中，每个输入行都有相同的 id。

 createNewPricedRoundShareholder(index) {
      var newPlatformNameInputContainer = document.getElementById(
        "round-shareholder-container"
      );
      //index identifier for each row
      newPlatformNameInputContainer.classList.add(`${index}_thisform`);
      const newPlatformNameInput = document.createElement("input");
      newPlatformNameInput.classList.add("form-control");
      newPlatformNameInput.classList.add("input");
      
      newPlatformNameInput.classList.add("dynamic-input");
      newPlatformNameInput.placeholder = "Username";
      newPlatformNameInput.setAttribute("type", "text");
      newPlatformNameInput.setAttribute("name", "username");

      newPlatformNameInputContainer.appendChild(newPlatformNameInput);

      var secondContainer = document.getElementById(
        "round-investment-container"
      );

      const newInitialOptionsPool = document.createElement("input");
      newInitialOptionsPool.classList.add("form-control");
      newInitialOptionsPool.classList.add("input");
      newInitialOptionsPool.classList.add("dynamic-input");
      newInitialOptionsPool.placeholder = "Investment";
      newInitialOptionsPool.name = "investment";
      newInitialOptionsPool.setAttribute("type", "text");
      newInitialOptionsPool.setAttribute("name", "investment");
      secondContainer.appendChild(newInitialOptionsPool);
      secondContainer.innerHTML += '<i class="fas fa-trash"></i>';
    secondContainer.onclick = function() {
                  var investmentInput = document.querySelector(`${index}_thisform`);
        investmentInput.parentNode.removeChild(investmentInput);
    //get the node with identifier and delete that node
            var usernameInput = document.querySelector(`${index}_thisform`);
            usernameInput.parentNode.removeChild(usernameInput)
               }
        }

Answer 2

您可以通过包装器包装输入和删除按钮，然后在用户单击删除按钮时删除当前节点。 我已经创建了一个演示，检查

 const mainParent = document.getElementById('main-parent'); var index = 0; function addButtonRows() { const newPlatformNameInput1 = document.createElement("input"); newPlatformNameInput1.id = index + '_first'; newPlatformNameInput1.value = index; const newPlatformNameInput2 = document.createElement("input"); newPlatformNameInput2.id = index + '_second'; newPlatformNameInput2.value = index; const deleteButton = document.createElement("button"); deleteButton.innerText = 'delete'; const wrapperParent = document.createElement('div'); wrapperParent.id = index + '_parent'; wrapperParent.appendChild(newPlatformNameInput1); wrapperParent.appendChild(newPlatformNameInput2); wrapperParent.appendChild(deleteButton); mainParent.appendChild(wrapperParent); index++; deleteButton.addEventListener('click', function(event) { removeCurrentRow(event); }); } function removeCurrentRow(event) { const parent = event.target.parentNode; const length = parent.childNodes.length; parent.parentNode.removeChild(parent); } const addButton = document.getElementById('add'); addButton.addEventListener('click', function() { addButtonRows(); });

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="main-parent"></div> <button id="add">Add</button> </body> </html>