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()和attribute selector查找孩子，然后将其删除：

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

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

2 个答案: