は、私は私のページにこのコードのロードを持っているDOM

Question

から特定の子要素を削除します。

<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() 

Answer 1

これを1つずつ見ていきましょう。両方のノードのリストを返す

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

機能getElementsByClassName()とquerySelectorAll()：あなたは上.remove()を使用することができます - あなたのセレクタに一致する最初のノード -

querySelector()機能は、単一のノードを返します。一致したすべてのノードを削除するには、それらを反復処理する必要があります。

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ではサポートされていません。クロス互換性のために、より長いバージョンまたはポリフィルを使用する必要があります。

Answer 2

まず、この行を修正してください。正しくはないことをご存知でしょうか。

<img src='someimg.jpg>  

第二に、あなたは、クラスによって選択された場合、複数の要素を使用すると、基本的な要素の配列を扱っていると、そのように扱わなければならないので、同じクラスを持つことができることを覚えておくことを理解する必要があります。

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