Как удалить элемент через js?

Question

Я создал алгоритм для отображения заголовка элемента в определенном блоке, но я не могу удалить то, что я вывел. js:

var products = document.querySelectorAll('.product-block'); //обьекты
var product_names = document.querySelectorAll('.product-block h5'); //заголовки, которые мы должны вывести
var array_product_names = Array.prototype.slice.call(product_names); //Из nodeList в массив
var favourite_elements = document.querySelector('.favourite_elements'); //место(блок) где нужно выводить данные
//способ определения, какой объект был нажат
products.forEach((product, i) => {
  product.onclick = function() {
    if (product.style.background != "orange") {
      product.style.background = "orange";
      var favourite_element = array_product_names[i].outerHTML;
      favourite_elements.insertAdjacentHTML('afterbegin', favourite_element); //добавление элементов
    } else if (product.style.background == "orange") {
      //Здесь при повторном нажатии хотел бы удалить соответствующий заголовок из списка вывода. Перепробовал все, не знаю как это решить
    }
  }
});

<!-- Здесь выбор объектов-->
<div class="row products">
  <h2>Популярные товары</h2>
  <div class="container">
    <div class="row">
      <a href="#" class="product col-2">
        <div class="product-block">
          <img src="img/product.jpg">
          <h5>Смартфон Samsung Galaxy A02s 32GB White</h5>
          <p>59 990 тг.</p>
        </div>
      </a>
      <a href="#" class="product col-2">
        <div class="product-block">
          <img src="img/product.jpg">
          <h5>Смартфон Samsung Galaxy A02s 32GB White</h5>
          <p>59 990 тг.</p>
        </div>
      </a>
      <a href="#" class="product col-2">
        <div class="product-block">
          <img src="img/product.jpg">
          <h5>Смартфон Samsung Galaxy A02s 32GB White</h5>
          <p>59 990 тг.</p>
        </div>
      </a>
      <a href="#" class="product col-2">
        <div class="product-block">
          <img src="img/product.jpg">
          <h5>Смартфон Samsung Galaxy A02s 32GB White</h5>
          <p>59 990 тг.</p>
        </div>
      </a>
      <a href="#" class="product col-2">
        <div class="product-block">
          <img src="img/product.jpg">
          <h5>Смартфон Samsung Galaxy A02s 32GB White</h5>
          <p>59 990 тг.</p>
        </div>
      </a>
      <a href="#" class="product col-2">
        <div class="product-block">
          <img src="img/product.jpg">
          <h5>Смартфон Samsung Galaxy A02s 32GB White</h5>
          <p>59 990 тг.</p>
        </div>
      </a>
    </div>
  </div>
</div>
<!-- Сюда добавляются заголовки-->
<div class="favourite_elements">
</div>

Answer 1

product.style.background != "orange" ← Проверка на строку - плохая идея. Она может быть разной (например, в формате RGB), даже если фон действительно будет оранжевым. Заменил его на CSS-класс. Он или есть, или его нет.

Для удаления элемента, есть метод родительский_элемент.removeChild(дочерний_элемент). Чтобы знать, кого удалить, ссылку на дочерний элемент нужно где-то хранить. Например, в дополнительном массиве:

let products = document.querySelectorAll('.product-block');
let product_names = document.querySelectorAll('.product-block h5');

let favourite = document.querySelector('.favourite_elements');

let h5_storage = new Array(products.length);
// Хранилище для ссылок на копируемые элементы H5

products.forEach((product) => {
  product.addEventListener("click", function() {
    toggle_favourite(this); // this - ссылка на кликнутый product
  });
});

function toggle_favourite(product) {
  let i = [].indexOf.call(products, product);
  // Номер кликнутого product среди всех остальных продуктов
    
  if (!product.classList.contains("orange")) {

    let h5 = h5_storage[i] = product_names[i].cloneNode(true);
    // h5 клонируется, ссылка на клон сохраняется в хранилище под тем же номером.
    
    favourite.insertAdjacentElement("afterbegin", h5);
  } else {

    favourite.removeChild(h5_storage[i]);
    // Удаляется по ранее сохраненной ссылке.
  }
  
  product.classList.toggle("orange");
}

.product-block {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 4px;
  padding: 4px;
  border: 1px solid #123;
  user-select: none;
}

.product-block.orange {
  background-color: orange;
}

<div class="product-block"><h5>aaa</h5></div>
<div class="product-block"><h5>bbb</h5></div>
<div class="product-block"><h5>ccc</h5></div>
<div class="product-block"><h5>ddd</h5></div>

<div class="favourite_elements"></div>

Другие варианты:

Без доп массива, хранить ссылку прямо в свойстве DOM-объекта кликнутого элемента, product._h5 = product_names[i].cloneNode(true);
Перебрать все дочерние элементы уже добавленных h5 и сравнивать их outerHTML с outerHTML нужного элемента. Совпало ? Удалить.
Не париться, и на каждом клике перебрать все продукты, собрать одну HTML-строку из всех h5, которые должны присутствовать, и сразу вставить всё через innerHTML. Если это небольшое количество простых текстовых элементов, сойдет.

БЛОГ НА HUSL

Как удалить элемент через js?

Ответы (1 шт):