「JavaScript」removeChild関数で複数の要素を削除する

2022年4月20日

書式
removeChild(child);
child　Node で、 DOM から取り除きたい子ノードを指定します。

removeChild() は Node インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。

Node.cloneNode() とは異なり、返値は関連付けられた EventListener オブジェクトを保持します。

removeChild() は Node インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。 Node.cloneNode() とは異なり、返値は関連付けられた EventListener オブジェクトを保持します。

removeChild() は Node インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。
Node.cloneNode() とは異なり、返値は関連付けられた EventListener オブジェクトを保持します。

使用例

<!DOCTYPE html>

<html>

<body>

</div>

</div>

function delFunc(){

//セレクタID「city」の要素の取得

const cc = document.getElementById("city");

for (let i=cc.childNodes.length-1; i>=0; i--) {

　　　　//指定した要素が削除される

cc.removeChild(cc.childNodes[i]);

}

</script>

</body>

</html>

<!DOCTYPE html> <html> <body> <div id="city"> <div id="cityA"> <p>東京</p> </div> <div id="cityB"> <p>大阪</p> </div> </div> <input type="button" value="削除" onclick="delFunc()"> <script> function delFunc(){ //セレクタID「city」の要素の取得 const cc = document.getElementById("city"); for (let i=cc.childNodes.length-1; i>=0; i--) { 　　　　//指定した要素が削除される cc.removeChild(cc.childNodes[i]); } } </script> </body> </html>

<!DOCTYPE html>
<html>
<body>
<div id="city">
      <div id="cityA">
            <p>東京</p>
  </div>
  <div id="cityB">
            <p>大阪</p>
      </div>
</div>
<input type="button" value="削除" onclick="delFunc()">
<script>
function delFunc(){
   //セレクタID「city」の要素の取得
  const cc = document.getElementById("city");
  for (let i=cc.childNodes.length-1; i>=0; i--) {
  　　　　//指定した要素が削除される
        cc.removeChild(cc.childNodes[i]);
  }
}
</script>

</body>
</html>

実行結果
「削除」ボタンを押下後、複数のdiv要素「cityA」、「cityB」が削除されます。

JavaScript

Posted by arkgame

関連投稿: