Question

我有一个简单的表单，可以在其中借助按钮添加输入字段。还有一个按钮可以删除div中的输入字段。我使用了.remove()函数（从SO中的答案中得到），该函数删除了第一个div，但是它没有删除第二个或我在Add Field按钮的帮助下添加的一个。现在没有任何解决方案，这似乎是一个独特而奇怪的问题。有人可以帮我吗？这是代码：

const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");
const deleteBtn = document.querySelector(".delete-btn");
const urlDiv = document.querySelector(".url-pair");
const html = `
    <div class="url-pair">
        <input type="url" autofocus="true">
        <input type="number" value="50%">
        <button class="delete-btn" type="button">Delete</button>
    </div>
`;

const deleteField = function(e) {
  urlDiv.remove();
}


addBtn.addEventListener('click', () => {
  span.insertAdjacentHTML("beforeBegin", html);
});

deleteBtn.addEventListener('click', deleteField);

<form action="#" method="POST">

  <div class="urls-container">
    <div class="url-pair">
      <input type="url" autofocus="true">
      <input type="number" value="50%">
      <button class="delete-btn" type="button">Delete</button>
    </div>

    <div class="url-pair">
      <input type="url" autofocus="true">
      <input type="number" value="50%">
      <button class="delete-btn" type="button">Delete</button>
    </div>

    <span></span>
  </div>

  <div>
    <div>
      <button type="button" id="addField">Add Url</button>
    </div>

    <div>
      <button type="submit">Create</button>
    </div>
  </div>

</form>

Answer 1

const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");

const html = `
        <div class="url-pair">
            <input type="url" autofocus="true">
            <input type="number" value="50%">
            <button class="delete-btn" type="button">Delete</button>
        </div>
    `;


addBtn.addEventListener('click', () => {
  span.insertAdjacentHTML("beforeBegin", html);
});

// listening click event on form element
form.addEventListener('click', e => {
  // target holds the specific HTMLElement which was clicked
  const target = e.target;

  // check if clicked element has class delete-btn, if no, stop
  if (!target.classList.contains('delete-btn')) return; // it was clicked outside the delete-btn

  // yes, the button was clicked 
  e.target.parentElement.remove(); // now remove its parent i.e div.url-pair from the DOM tree
});

<form action="#" method="POST">
  <div class="urls-container">
    <div class="url-pair">
      <input type="url" autofocus="true">
      <input type="number" value="50%">
      <button class="delete-btn" type="button">Delete</button>
    </div>

    <div class="url-pair">
      <input type="url" autofocus="true">
      <input type="number" value="50%">
      <button class="delete-btn" type="button">Delete</button>
    </div>

    <span></span>
  </div>

  <div>
    <div>
      <button type="button" id="addField">Add Url</button>
    </div>

    <div>
      <button type="submit">Create</button>
    </div>
  </div>

</form>

Answer 2

您需要删除带有url-pair AND委托类的父级

这是我能让你做的最简单的脚本

window.addEventListener("load", function() {
  const container = document.querySelector(".urls-container");
  const html = container.querySelector(".url-pair").cloneNode(true); // wee need an empty copy
  document.getElementById("addField").addEventListener('click', () => {
    container.appendChild(html.cloneNode(true)); // take a copy
  });

  document.querySelector(".urls-container").addEventListener("click", (e) => {
    const tgt = e.target;
    if (tgt.classList.contains("delete-btn")) {
      tgt.closest("div.url-pair").remove();
    }
  })
})

.urls-container .url-pair:first-child .delete-btn {
  display: none;
}

<form action="#" method="POST">

  <div class="urls-container">
    <div class="url-pair">
      <input type="url" autofocus="true">
      <input type="number" value="50%">
      <button class="delete-btn" type="button">Delete</button>
    </div>

  </div>

  <div>
    <div>
      <button type="button" id="addField">Add Url</button>
    </div>

    <div>
      <button type="submit">Create</button>
    </div>
  </div>

</form>

Answer 3

尝试使用e.target.parentElement.remove();。

由于元素是动态生成的，因此需要delegate event处理程序。

使用如下所示的事件。

document.addEventListener('click', function(event) {  
  if (Array.from(event.target.classList).includes('delete-btn')) {
    event.target.parentElement.remove();
  }
});

您可以在下面测试输出。

const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");
const deleteBtn = document.querySelector(".delete-btn");
const urlDiv = document.querySelector(".url-pair");
const html = `
    <div class="url-pair">
        <input type="url" autofocus="true">
        <input type="number" value="50%">
        <button class="delete-btn" type="button">Delete</button>
    </div>
`;

const deleteField = function(e) {
  urlDiv.remove();
}


addBtn.addEventListener('click', () => {
  span.insertAdjacentHTML("beforeBegin", html);
});

document.addEventListener('click', function(event) {  
  if (Array.from(event.target.classList).includes('delete-btn')) {
    event.target.parentElement.remove();
  }
});

<form action="#" method="POST">

  <div class="urls-container">
    <div class="url-pair">
      <input type="url" autofocus="true">
      <input type="number" value="50%">
      <button class="delete-btn" type="button">Delete</button>
    </div>

    <div class="url-pair">
      <input type="url" autofocus="true">
      <input type="number" value="50%">
      <button class="delete-btn" type="button">Delete</button>
    </div>

    <span></span>
  </div>

  <div>
    <div>
      <button type="button" id="addField">Add Url</button>
    </div>

    <div>
      <button type="submit">Create</button>
    </div>
  </div>

</form>

Answer 4

您仅将事件绑定到第一个按钮，并且仅删除第一个元素。

enableEndsAt()

const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");
const deleteBtn = document.querySelectorAll(".delete-btn");
const urlDiv = document.querySelector(".url-pair");
const html = `
    <div class="url-pair">
        <input type="url" autofocus="true">
        <input type="number" value="50%">
        <button class="delete-btn" type="button">Delete</button>
    </div>
`;

const deleteField = function(e) {
  e.target.closest(".url-pair").remove();
}


addBtn.addEventListener('click', () => {
  span.insertAdjacentHTML("beforeBegin", html);
  btnList = document.querySelectorAll('.delete-btn');
  btnList[btnList.length-1].addEventListener('click', deleteField);
});

Array.from(deleteBtn).forEach((btn) => btn.addEventListener('click', deleteField));

Answer 5

m.addConstrs((quicksum(x[i])+quicksum(y[i]) == 1 for i in P)
m.addConstrs((quicksum(x[i])+quicksum(y[i]) == -1 for i in D)

const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");
const deleteBtnList = document.querySelectorAll(".delete-btn");
const html = `
    <div class="url-pair">
        <input type="url" autofocus="true">
        <input type="number" value="50%">
        <button class="delete-btn" type="button">Delete</button>
    </div>
`;

const deleteField = function(e) {
  e.target.parentElement.remove();
}


addBtn.addEventListener('click', () => {
  span.insertAdjacentHTML("beforeBegin", html);
});

Array.from(deleteBtnList).forEach(elem => {
    elem.addEventListener('click', deleteField);
});

Javascript .remove（）函数删除第一个div，但不删除另一个

5 个答案: