Удалить родительский элемент с помощью ES6

john c. j. спросил: 28 марта 2018 в 04:37 в: javascript

Вот попытка удалить родительский 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>

2 ответа

Есть решение
CertainPerformance ответил: 28 марта 2018 в 04:49

Ваша проблема в том, что функции const (наряду с чем-либо еще, инициализированным с помощью const или let) не поднимаются: в момент добавления слушателя removeClickedImage еще не определено. Добавьте слушателя после , функция была определена, и она работает просто отлично. Единственный раз, когда вы можете положиться на такой подъем, - это когда рассматриваемая переменная является функцией, определенной с помощью объявления функции , например, function fnName() {.

  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);
<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>
john c. j. ответил: 28 марта 2018 в 05:19
Большое спасибо. Я знаю, это полностью выходит за рамки этого вопроса, но как его можно изменить, чтобы он работал без прослушивателя событий, мгновенно? Конечно, removeClickedImage(); внизу файла не работает, потому что это не функция.
CertainPerformance ответил: 28 марта 2018 в 05:29
Что ты имеешь в виду, instantly? Слушатели активируются сразу. Было бы возможно сделать что-то подобное, используя CSS и скрытые флажки, но это очень хакерское решение, которое не должно использоваться. Javascript является правильный инструмент для работы здесь
john c. j. ответил: 28 марта 2018 в 05:32
Вот что я имею в виду: jsfiddle.net/a1tez3r1. Вы просто запускаете скрипт, и вам не нужно нажимать какие-либо элементы, чтобы увидеть предупреждение.
CertainPerformance ответил: 28 марта 2018 в 05:37
Почему бы просто не удалить изображения из HTML, если вы хотите, чтобы они были удалены немедленно? Или вы можете просто удалить div .gallery. Вы также можете перебирать все div image, но это немного сложнее.
john c. j. ответил: 28 марта 2018 в 05:42
Нет, это всего лишь пример. В реальной жизни это будет частью usercript. Было бы ловить все дивы, появляющиеся, когда я прокручиваю окно браузера и удаляю их. Сам div загружается при прокрутке через AJAX. Если такой div содержит посещенную ссылку, его следует удалить. Я уже пробовал разные способы для этого.
Taki ответил: 28 марта 2018 в 04:42

вы должны объявить функцию перед ее вызовом, когда используете const, см. Лексическое объявление доступа к файлу до init

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);
<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>