манипуляция javascript и dom

Question

Моя цель - удалить и / или переместить родительский элемент кнопки на странице при ее нажатии. Кажется, DOM не отвечает на мое событие click. Я думаю, что это как-то связано с областью видимости и глобальными переменными, но я все еще новичок. Вот как выглядит мой код.

var startButton = document.querySelectorAll('button[data-action="start"]');
var deleteButton = document.querySelectorAll('button[data-action="delete"]');
var element = document.getElementsByTagName('section');
var firstChildElement = element.firstChild;

startButton.addEventListener("click", toStart);
deleteButton.addEventListener("click", deleter);

/*function declarations*/
function toStart() {
  element.insertBefore(this.parentNode, firstChildElement);
}

function deleter() {
  element.removeChild(this.parentNode);
}

<section>
  <article>
    <h2>Item One ?</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
  <article>
    <h2>Item Two ?</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
  <article>
    <h2>Item Three ?</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
</section>

Answer 1

Это потому, что вы используете querySelectorAll(), который возвращает список узлов (набор узлов), и вы не можете добавить прослушиватель событий (вызов .addEventListener()) на съемочной площадке. Вы можете сделать это только на отдельном узле. То же самое верно для .getElementsByTagName(). Он также возвращает список узлов, и вы не можете запросить .firstChild списка узлов. Вы можете вызвать его только на узле.

Вместо этого вы можете использовать .querySelector(), чтобы получить только первый узел, соответствующий селектору.

Теперь, если вы хотите настроить события на всех кнопках, вам нужно перебрать список узлов и вызвать .addEventListener() для каждой из них.

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

// We're going to let all click events within the section be handled at the section level
// instead of setting up the same handlers on multiple elements.
let sec = document.querySelector("section");
sec.addEventListener("click", handleClick);

// When the event bubbles up to the section, this function will be called
// and it will automatically receive a reference to the event that triggered it
function handleClick(event){
  // The .target property of the event object refers to the lower-level ojbect
  // that actually initiated the event (either a start or delete button in our case).
  // We're going to need the nearest <article> ancestor of the button that was clicked
  // The closest() method finds the nearest ancestor element that matches the selector
  let art = event.target.closest("article");

  // We can check what the source of the event was and act accordingly
  // Since you've used data-* attributes, use the dataset API to test them
  if(event.target.dataset.action === "start"){
    toStart(art);
  } else if(event.target.dataset.action === "delete") {
    deleter(art);
  }
}

/*function declarations*/
function toStart(element){
  element.parentNode.insertBefore(element, element.parentNode.firstChild);
}

function deleter(element){
  element.parentNode.removeChild(element);
}

<section>
  <article>
    <h2>Item One ?</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
  <article>
    <h2>Item Two ?</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
  <article>
    <h2>Item Three ?</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <button data-action="start">Move to start</button>
    <button data-action="delete">Delete</button>
  </article>
</section>