使用ES6删除父元素

Question

这是尝试删除父div。为什么它不起作用？

var images = document.querySelector('.gallery');
images.addEventListener('click', removeClickedImage);

const hasClass = (el, test) => el.classList.contains(test);
const removeClickedImage = ({ target }) => {
    if (hasClass(target, 'remove')) {
        target.parentNode.remove();
    }
};

<div class="gallery">
    <div class="image">
        <img src="foo.jpg">
        <button class="remove">x</button>
    </div>
    <div class="image">
        <img src="bar.png">
        <button class="remove">x</button>
    </div>
</div>

Answer 1

您的问题是const函数（以及使用const或let初始化的任何其他内容）都不会被挂起：在您添加监听器的那一刻，removeClickedImage尚未定义。 在定义函数后添加监听器，它可以正常工作。唯一可以依赖这样提升的时候是有问题的变量是通过函数声明定义的函数，例如function fnName() {。

＆＃13;

＆＃13;

  const hasClass = (el, test) => el.classList.contains(test);
  const removeClickedImage = ({
    target
  }) => {
    if (hasClass(target, 'remove')) {
      target.parentNode.remove();
    }
  };

  var images = document.querySelector('.gallery');
  images.addEventListener('click', removeClickedImage);

＆＃13;

<div class="gallery">
  <div class="image">
    <img src="foo.jpg">
    <button class="remove">x</button>
  </div>
  <div class="image">
    <img src="bar.png">
    <button class="remove">x</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在使用const时，必须在调用该函数之前声明该函数，请参阅：Cant access lexical declaration before init

＆＃13;

＆＃13;

const removeClickedImage = ({ target }) => {
    if (hasClass(target, 'remove')) {
        target.parentNode.remove();
    }
};

var images = document.querySelector('.gallery');
images.addEventListener('click', removeClickedImage);

const hasClass = (el, test) => el.classList.contains(test);

＆＃13;

<div class="gallery">
    <div class="image">
        <img src="foo.jpg">
        <button class="remove">x</button>
    </div>
    <div class="image">
        <img src="bar.png">
        <button class="remove">x</button>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;