如何动态移除javascript中的元素？
如何动态移除javascript中的元素？
提问于 2018-06-25 01:46:52
有没有办法用javascript或jquery动态删除元素。假设我有一个用于创建新元素的函数createElements()和另一个用于删除相应元素的函数removeElement()。您将注意到，当您运行代码片段时，当您单击remove按钮时，所有元素都消失了！我如何实现这段代码呢？有没有一个jquery选择器，在那里我可以简单地使用removeElement(这)或类似的东西？非常欢迎您的建议:)谢谢。
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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-25 01:55:35
你可以这样做：
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>
Stack Overflow用户
发布于 2018-06-25 01:53:13
你只需要遵循一个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>
Stack Overflow用户
发布于 2018-06-25 01:57:13
为了能够始终删除包含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>
因此，您将单击事件作为参数传递给函数，然后使用event.target找出单击了哪个按钮。$(event.target).closest(".newElem")将通过测试元素本身并遍历其在DOM树中的祖先来获得与选择器匹配的第一个元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51012490
复制相关文章
相似问题