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 元素。