如何刪除使用querySelectorAll獲取的元素？

他似乎有點快速的答案，但我找不到一個。也許我在尋找錯誤的條款？沒有圖書館，雖然我不需要跨瀏覽器回退，但我的目標是該項目的所有最新版本。如何刪除使用querySelectorAll獲取的元素？

我得到的一些元素：

element = document.querySelectorAll(".someselector");

YEY！

如何刪除這些元素？我錯過了什麼？我是否必須通過它們循環執行element.parentNode.removeChild(element);的事情，還是有一個簡單的功能，我錯過了？

2012-10-29 Randy Hall

是的，你幾乎是正確的。 .querySelectorAll返回一個凍結的NodeList。你需要迭代它並做一些事情。

Array.prototype.forEach.call(element, function(node) { 
    node.parentNode.removeChild(node); 
});

即使你只得到了一個結果，你就需要通過索引來訪問它，就像

elements[0].parentNode.removeChild(elements[0]);

如果你只要來查詢一個元素，使用.querySelector代替。在那裏，您只需獲取節點引用，而無需使用索引進行訪問。

2012-10-29 16:35:43 jAndy

作品！太好了，謝謝！ –

@jAndy謝謝你的回答。我需要刪除NodeList的第一個節點。有什麼辦法可以直接刪除第一個節點嗎？ – Raghvendra

那麼，你可以簡單地在今天的DOM API中調用'elementsList [0] .remove（）;'。 – jAndy

由於NodeList已經支持forEach你可以只使用

document.querySelectorAll(".someselector").forEach(e => e.parentNode.removeChild(e));

<div> 
 
    <span class="someselector">1</span> 
 
    <span class="someselector">2</span> 
 
    Should be empty 
 
</div>

見NodeList.prototype.forEach()。請記住，Internet Explorer不受支持。

編輯：Internet Explorer支持。如果您也想使上面的代碼在IE工作，隨便找個地方之前加上這段代碼在你的JS：

if (!NodeList.prototype.forEach && Array.prototype.forEach) { 
    NodeList.prototype.forEach = Array.prototype.forEach; 
}

..和NodeList在IE會突然支持forEach爲好。

2017-09-26 11:11:14

回答