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) {&nbsp; const child = document.querySelector(`[data-id='${dataID}']`);&nbsp; if(child) child.remove();};removeChild(2);<div class="parent-div">&nbsp; <div class="child-item" data-id="1"> SomeContent </div>&nbsp; <div class="child-item" data-id="2"> SomeContent </div>&nbsp; <div class="child-item" data-id="3"> SomeContent </div></div>如果可以有多个具有相同属性的项目，请使用Document.querySelectorAll()，然后使用 forEach 迭代结果，并删除项目：function removeChild(dataID) {&nbsp; const children = document.querySelectorAll(`[data-id='${dataID}']`);&nbsp; children.forEach(el => el.remove());};removeChild(2);<div class="parent-div">&nbsp; <div class="child-item" data-id="1"> SomeContent </div>&nbsp; <div class="child-item" data-id="2"> SomeContent </div>&nbsp; <div class="child-item" data-id="2"> SomeContent </div>&nbsp; <div class="child-item" data-id="2"> SomeContent </div>&nbsp; <div class="child-item" data-id="2"> SomeContent </div>&nbsp; <div class="child-item" data-id="2"> SomeContent </div>&nbsp; <div class="child-item" data-id="3"> SomeContent </div></div>