JavaScript，通过自定义数据 ID 查找子 DIV

Question

我正在尝试使用已经设置的自定义 DATA-ID attr ive在他的父母中找到一个孩子 DIV ，在找到那个特定的孩子之后，将其删除。我已经让我的代码工作了，但我想知道是否有更好的方法，更好的方法？假设我试图找到 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>