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

Question

当我单击按钮时，我试图删除一个 DOM 元素。 我认为通过“这个”我可以很容易地做到这一点。 但是，“this”在这种情况下不起作用。

我尝试如下。

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

单击 DOM Object 时如何删除元素？

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

完整代码在以下链接中。

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 加载后添加的，我们将使用事件委托的概念来添加事件监听器。 我们将所有事件监听器在父卡class 上，并检查它是否返回一个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 元素。