Question

有没有一种方法可以使用javascript或jquery动态删除元素。假设我有一个创建新元素的函数createElements（）和另一个要删除相应元素的函数removeElement（）。您会注意到，在运行摘录时，当您单击删除按钮时，所有元素都消失了！如何实现此代码？没有jquery选择器，我可以简单地使用removeElement（this）或类似的东西吗？任何建议都非常欢迎:)谢谢。

function createElements() {
  const boom = document.getElementById('boom');
  boom.insertAdjacentHTML(
    'beforeend', '<div class="newElem"><p >new element created dynamically yay!</p><button onclick="removeElement()">remove</button></div>'
  );
}

function removeElement() {
  alert('element removed dynamically boOoOoOoOooo!')
  $('.newElem').remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>

Answer 1

您只需要遵循一个API。使用纯JavaScript或jQuery。我还建议您使用通畅的方法。另外，删除元素的方法是错误的。您正在删除所有内容。

这种方式：

$(function() {
  $("button#add").click(function() {
    $("#boom").after('<div class="newElem"><p >new element created dynamically yay!</p><button class="remove">remove</button></div>');
  });

  $(document).on("click", ".remove", function() {
    alert('element removed dynamically boOoOoOoOooo!')
    $(this).closest(".newElem").remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<button id="add">Create new element</button>

Answer 2

您可以这样做：

function createElements() {
  const boom = document.getElementById('boom');
  boom.insertAdjacentHTML(
    'beforeend', '<div class="newElem"><p >new element created dynamically yay!</p><button onclick="removeElement(this)">remove</button></div>'
  );
}

function removeElement(element) {
  alert('element removed dynamically boOoOoOoOooo!')
  $(element).parent(".newElem").remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>

Answer 3

要始终删除包含remove按钮的div，必须遍历DOM树。为此，有很多jQuery好东西：http://api.jquery.com/category/traversing/

在这种情况下，我将执行以下操作：

var elementCounter = 0;

function createElements() {
  const boom = document.getElementById('boom');
  boom.insertAdjacentHTML(
    'beforeend', '<div class="newElem"><p >'+elementCounter+': new element created dynamically yay!</p><button onclick="removeElement(event)">remove</button></div>'
  );
  elementCounter++;
}

function removeElement(event) {
  alert('element removed dynamically boOoOoOoOooo!')
  $(event.target).closest('.newElem').remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>

因此，您将click事件作为参数传递给函数，然后使用event.target来确定单击了哪个按钮。 $(event.target).closest(".newElem")将通过测试元素本身并在DOM树中遍历其祖先来获得与选择器匹配的第一个元素。

如何动态删除javascript中的元素？

3 个答案: