從DOM

刪除特定的子元素，我有我的網頁上的代碼加載：從DOM

<div class='zoomPad'> 
    <img src='someimg.jpg'> 
    <div class='zoomPup'></div> 
    <div class='zoomWindow'></div> 
    <div class='zoomPreload'></div> 
</div>

如何刪除從DOM 3周的div？我到目前爲止所嘗試的所有東西都無法使在這裏，我嘗試了一些：

document.getElementsByClassName('zoomPad').removeChild('.zoomPup, .zoomWindow, .zoomPreload') 
document.getElementsByClassName('.zoomPup, .zoomWindow, .zoomPreload').remove() 

document.querySelectorAll('.zoomPad').removeChild('.zoomPup, .zoomWindow, .zoomPreload') 
document.querySelectorAll('.zoomPup, .zoomWindow, .zoomPreload').remove() 

document.querySelector('.zoomPad').removeChild('.zoomPup, .zoomWindow, .zoomPreload') 
document.querySelector('.zoomPup, .zoomWindow, .zoomPreload').remove()

來源

2017-07-12 almostamachine

'removeChild'需要一個節點，而不是一個選擇器作爲它的參數。 'getElementsByClassName'和'querySelectorAll'返回沒有任何方法的元素的集合 - 你需要迭代。 – Bergi

我認爲你需要在實際元素上刪除Child。因此，在第一行示例中，如果將它分成兩行，首先類似於「var zoomPup = document.getElementsByClassName（'zoomPup'）;然後是第二行（與第一行幾乎相同）」document.getElementsByClassName（'zoomPad' ）.removeChild（zoomPup）;「它應該可以工作，注意 - 沒有測試過。注2：因爲getElements返回一個集合，所以你需要處理它，如果你總是隻有1個，你可以搶先一個，否則你可能需要找出其他邏輯。 – Aaron

讓我們一一瀏覽。

的querySelector()函數返回一個節點 - 你的選擇相匹配的第一個節點 - 你可以上使用.remove()：

document.querySelector('.zoomPup').remove() 
document.querySelector('.zoomWindow').remove() 
document.querySelector('.zoomPreload').remove()

功能getElementsByClassName()和querySelectorAll()都返回節點列表。要刪除所有匹配的節點，您必須遍歷它們。

let nodes = document.querySelectorAll('.zoomPup, .zoomWindow, .zoomPreload') 
for(let i = 0, j = nodes.length; i < j; i++) { 
    nodes[i].remove() 
}

現在，這會從您的文檔中刪除所有元素用這些類。要從特定父只刪除子節點，你可以使用從父節點這些查詢功能，而不是，檢索，首先經過：

// Query for only the first zoomPad node 
let parentNode = document.querySelector('.zoomPad') 
// Query for a list its children 
let childNodes= parentNode.querySelectorAll('.zoomPup, .zoomWindow, .zoomPreload') 

for(let i = 0, j = childNodes.length; i < j; i++) { 
    let childNode = childNodes[i] 
    parentNode.removeChild(childNode) 
}

注意removeChild()不通過一個選擇，但對節點自身的引用。它也只適用於直接父節點的後代。對於嵌套節點，最好使用childNode.remove()或使用childNode.parentNode.removeChild(childNode)，這基本上是前者的語法糖。

重要說明：childNode.remove()不受Internet Explorer支持。因此爲了交叉兼容性，必須使用更長的版本或polyfill。

來源

2017-07-12 20:05:24 MildlySerious

首先，修復這條線bc你知道這是不對的。

<img src='someimg.jpg>

其次，你必須明白，當你被選擇類，記住多個元素可以有相同的類，所以你基本上是處理元素的數組，必須把它當作這樣的。

var x = document.getElementsByClassName("zoomPup"); 
x[0].parentNode.removeChild(x[0]);

來源

2017-07-12 20:05:39

回答

相關問題