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

Question

Это упражнение из теста.

Мне нужно, чтобы кнопка удаления работала. Я не понимаю, почему линия

document.getElementsByClassName("remove")[0].click();

есть ли

Вот код

function setup() {
  // Write your code here.
}

// Example case. 
document.body.innerHTML = `
<div class="image">
  <img src="someimage.jpg" alt="First">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="someimage.jpg" alt="Second">
  <button class="remove">X</button>
</div>`;

setup();

document.getElementsByClassName("remove")[0].click();
console.log(document.body.innerHTML);

Редактировать: ожидаемый вывод - кнопка удаления удалит родительский div (class = "image")

Answer 1

Я не могу понять вашу проблему, но

document.getElementsByClassName("remove")[0].click();

строка имитирует щелчок по первому элементу класса css с именем "remove", поэтому он бесполезен, поскольку к этому элементу не прикреплено никакого события. Я думаю, что addEventListener - это то, что вы ищете.

Answer 2

Это не работает, потому что кнопка «удалить» не имеет функции обратного вызова для события click, определенного для него.

Кроме того, это: document.getElementsByClassName("remove")[0] не должно использоваться как этоприводит к тому, что живой список узлов создается только для того, чтобы выбросить этот список узлов только для первого элемента в нем. Вместо этого следует использовать document.querySelector(".remove"). Подробнее см. этот другой мой пост .

Итак, если мы добавим обработчик событий click и очистим ваш код, он будет работать:

function setup() {
  // Write your code here.
  
  // This will set up a callback function for when the remove button gets clicked:
  theRemoveButton.addEventListener("click", function(){
    console.log("You clicked the remove button!");
    this.closest(".image").remove();
  });
}

// Example case. 
document.body.innerHTML = `
<div class="image">
  <img src="someimage.jpg" alt="First">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="someimage.jpg" alt="Second">
  <button class="remove">X</button>
</div>`;

var theRemoveButton = document.querySelector(".remove");

setup();

theRemoveButton.click();  // Forces the click event to fire on the button
console.log(document.body.innerHTML);