JavaScript, Finding Child DIV по индивидуальному идентификатору

Question

Я пытаюсь найти дочерний DIV внутри его родителя, используя собственный DATA-ID attr ive уже установлен , и после того, как обнаружил этого конкретного дочернего элемента, удаляю его. Я заставил свой код работать, но мне интересно, есть ли лучший способ сделать это, лучший метод?

Допустим, я пытаюсь найти ребенка с DATA-ID = 2:

HTML

    <div class="parent-div">
       <div class="child-item" data-id="1"> SomeContent </div>
       <div class="child-item" data-id="2"> SomeContent </div>
       <div class="child-item" data-id="3"> SomeContent </div>
    </div>

JS

    removeChild(dataID) {
       const parentContainer = document.querySelector('.parent-div');
       const children = [...parentContainer.querySelectorAll('.child-item')];

       children.forEach(child => {
          child.dataset.id === dataID ? child.remove() : 0;
       })
   };

   removeChild(2);

Answer 1

Найдите ребенка напрямую с помощью Element.querySelector() с селектором атрибута и удалите его:

function removeChild(dataID) {
  const child = document.querySelector(`[data-id='${dataID}']`);

  if(child) child.remove();
};

removeChild(2);

<div class="parent-div">
  <div class="child-item" data-id="1"> SomeContent </div>
  <div class="child-item" data-id="2"> SomeContent </div>
  <div class="child-item" data-id="3"> SomeContent </div>
</div>

Если у вас может быть несколько элементов с одинаковым атрибутом, используйте Document.querySelectorAll(), а затем повторите результаты с помощью forEach и удалите элементы:

function removeChild(dataID) {
  const children = document.querySelectorAll(`[data-id='${dataID}']`);

  children.forEach(el => el.remove());
};

removeChild(2);

<div class="parent-div">
  <div class="child-item" data-id="1"> SomeContent </div>
  <div class="child-item" data-id="2"> SomeContent </div>
  <div class="child-item" data-id="2"> SomeContent </div>
  <div class="child-item" data-id="2"> SomeContent </div>
  <div class="child-item" data-id="2"> SomeContent </div>
  <div class="child-item" data-id="2"> SomeContent </div>
  <div class="child-item" data-id="3"> SomeContent </div>
</div>

Answer 2

Используйте более простой querySelectorAll вызов, например:

removeChild(id) {
    document.querySelectorAll(".parent-div .child-item").forEach(e => e.dataset.id == id ? e.remove() : 0);
}