时间戳

首页 > 解决方案 > 如何动态删除javascript中的元素？

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

问题描述

有没有办法使用 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>

标签： javascriptjqueryhtml

解决方案

您只需要遵循一个 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>

推荐阅读