Удалить элемент dom с помощью кнопки внутри него, vanilla JS

Я новичок в этом и искал способ сделать кнопку «удалить» с назначенным прослушивателем событий, чтобы удалить элемент, к которому он относится (li).

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

Простой HTML

<h1>The List</h1>
<ul>
  <li>Delete me<button id="del">x</button></li>
  <li>Delete me too<button id="del">x</button></li>
</ul>

Я хотел бы, чтобы каждая кнопка «del» удаляла своего родителя — «li», где эта кнопка вложена ... и я хочу написать функцию многократного использования.

Я могу понять, что мне нужно сделать функцию щелчка, чтобы удалить дочерний элемент (li) родителя (ul). Как я могу связать конкретный «ли» с вложенной в него «кнопкой»?

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

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

const parent = document.getElementsByTagName('ul')[0];
const child = parent.getElementsByTagName('li')[0];
const del = document.getElementById('del');

function removeMe() {
  parent.removeChild(child);
}

del.addEventListener('click', removeMe);

Благодарю вас!


javascript event-listener button dom removechild
person WhiteChilli    schedule 29.11.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Поскольку вы хотите добавить одинаковую логику на несколько кнопок, вам следует использовать classes вместо ids. Идентификатор должен быть уникальным. С помощью Element.closest() вы можете найти ближайший родитель от того места, где произошел щелчок, пока не найдет узел, соответствующий предоставленной строке селектора. Прочтите комментарии внутри примера кода здесь

const deleteButtons = document.querySelectorAll('.del'); // will give you an array of buttons

deleteButtons.forEach( button => {
  button.addEventListener('click', removeMe); // add the event listener to each button
});

function removeMe() {
   this.closest('li').remove(); // this is the button, from there you want to move up in DOM and find the closes <li> to remove
}
<h1>The List</h1>
<ul>
  <li>Delete me<button class="del">x</button></li>
  <li>Delete me too<button class="del">x</button></li>
</ul>

person caramba    schedule 29.11.2020

arrow_upward
0
arrow_downward

Как отмечали другие, идентификатор элемента должен быть уникальным в документе .

Используйте делегирование событий и используйте data-attribute, чтобы распознать кнопку, которая должна активировать удаление.

document.addEventListener('click', evt => {
  const origin = evt.target;
  if (+origin.dataset.deleteparent) {
    origin.closest("li").remove();
  }
});

/* 
  --explained--
  const origin = evt.target;
                 ^ where did the click originated?
  if (+origin.dataset.deleteparent)
      ^       ^ only if the button contains data-deleteparent attribute
      ^ convert data-attribute value to Number. 
        If it's not there, or 0, nothing will happen
    origin.closest("li").remove();
           ^ parent li   ^
                         ^ remove it
  }
*/
button[data-deleteparent] { color: red; border: none; background-color: transparent; cursor: pointer}
<h1>The List</h1>
<ul>
  <li>Delete me <button data-deleteparent="1">&#x2718;</button></li>
  <li>Delete me too <button data-deleteparent="1">&#x2718;</button></li>
  <li>Delete me not <button>Do not delete</button></li>
</ul>

person KooiInc    schedule 29.11.2020
comment
Даже если вы используете другой подход, это приведет к удалению всех элементов <li>, содержащих кнопку. вы не проверяете id, который не уникален, но и id должен быть уникальным. извините, это нужно против - person caramba; 29.11.2020
comment
Скорректировал ответ. - person KooiInc; 29.11.2020
comment
.parentNode.parentNode, немного отредактируйте HTML, посмотрите, как приложение не работает, затем перейдите к JS, отредактируйте, например: как: .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode обновите, и все заработает! closest всегда должен быть предпочтительным способом сделать JS максимально гибким. - person Roko C. Buljan; 29.11.2020
comment
@RokoC.Buljan Хорошо. Хотел продемонстрировать здесь обход DOM, но closest тоже подойдет. - person KooiInc; 29.11.2020

arrow_upward
-1
arrow_downward

Просто используйте свойство parentElement узла DOM. Кроме того, как упоминалось выше, в вашем случае вы должны использовать classes вместо id, потому что id должен быть уникальным.

const buttons = document.querySelectorAll('.rm-button');

function rmParent() {
   this.parentElement.remove();
}

buttons.forEach(button => {
  button.addEventListener('click', rmParent);
});
<h1>The List</h1>
<ul>
  <li>Delete me<button class="rm-button">x</button></li>
  <li>Delete me too<button class="rm-button">x</button></li>
</ul>

person Zekfad    schedule 29.11.2020