Javascript - Как удалить элемент DOM, щелкнув мышью (эта команда)

Question

Я пытаюсь удалить элемент DOM, когда нажимаю кнопку. Я предполагал, что с помощью «этого» легко смогу добиться этого. Однако «это» в данном случае не работает.

Я пробовал, как показано ниже.

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

Как удалить элемент, когда я щелкаю по объекту DOM?

Как работает страница, я нажимаю кнопку Добавить Mov ie, и код считывает ввод информации I и генерирует карты в соответствии с информацией, которую я ввел,

Полный код находится по следующей ссылке .

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

Заранее спасибо

Answer 1

Попробуйте заменить свой код для этого

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

Answer 2

Я предлагаю использовать селекторы вместо жесткого кодирования элемента. После этого вы можете указать внутри слушателя, что вы хотите удалить этот выбранный элемент.

Пример кода HTML:

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

Теперь, когда карта добавляется в соответствии с после загрузки DOM мы будем использовать концепцию делегирования событий для добавления слушателей событий. Мы все будем прослушивать события в родительском классе, т. Е. Card, и проверим, возвращает ли он идентификатор.

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

Это удалит элемент из DOM.

Answer 3

Замените

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

на

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

Answer 4

Вы можете скорее использовать функции getElement или querySelector, которые позволят вам получить прямой доступ к рассматриваемому элементу DOM.