Question

单击按钮时，我试图删除DOM元素。我以为通过“这个”我可以轻松实现这一目标。但是，“ this”在这种情况下不起作用。

我尝试如下。

deletebutton.addEventListener('click',function()
{this.parentNode.parentNode.removeChild(this.parentNode.parentNode)})

单击DOM对象时如何删除元素？

页面的工作方式是我点击添加电影按钮，并且代码通过我输入的信息读取并根据我输入的信息生成卡片，

完整代码在下面的链接中。

https://codepen.io/jotnajoa/pen/mdVWddz

先感谢您

Answer 1

尝试为此替换代码

deletebutton.addEventListener("click", function () {
  this.parentNode.remove();
});

Answer 2

替换

    deletebutton.addEventListener('click',function()
{this.parentNode.parentNode.removeChild(this.parentNode.parentNode)})

使用

    deletebutton.addEventListener('click',function()
{this.parentNode.parentNode.removeChild(this.parentNode)})

Answer 3

我建议使用选择器，而不是对元素进行硬编码。之后，您可以在侦听器中指定要删除所选元素的对象。

HTML代码示例：

<div class="cards">
<div id="card-1">
Your card goes here
</div>
</div>

现在，由于根据DOM加载后添加了卡，我们将使用事件委托的概念来添加事件侦听器。我们将在父类（即卡片类）上使用所有事件监听器，并检查其是否返回ID。

document.querySelector('.cards').addEventListener('click', event => {
if(event.target.id !== ''){
let storeID = event.target.id;
document.getElementById(storeID).remove();
}
}

这将从DOM中删除该元素。

Answer 4

您可以使用getElement或querySelector函数，这些函数将允许您直接访问有问题的DOM元素。

Javascript-如何通过单击删除DOM元素（此命令）

4 个答案: