7章 要素の削除

本章では、要素の削除について学びます。

7.1 要素の削除

削除するにはremoveChildを使います。

element.removeChild(target);

引数targetは削除対象の要素オブジェクトで、elementの子要素である必要があります。

具体例を見てみます。

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

item2のli要素を削除するとします。

//親のulを取得
var ul =  document.querySelector('ul');

//削除したい2番めの要素を取得
var li2 = ul.children[1];

//li2を削除
ul.removeChild(li2);

removeChildは子要素を削除するので、親要素オブジェクトのメソッドとして呼ぶ必要があります。

ただし、以下のようにすれば親要素を取得せずに削除することができます。

//削除対象のli2を取得
var li2 =  document.querySelector('ul li:nth-child(2)');
//自分自身を削除
li2.parentNode.removeChild(li2);

parentNodeを使って子要素から親要素を参照しています。これだと実質的には子要素が自分自身を削除している感覚で使うことができます。

7.2 子要素をまとめて削除

複数の子要素を持つ場合に、すべての子要素を削除したいときがあります。そのとき、すべての子要素に対してremoveChildを実行するのは面倒です。このような場合はinnerHTMLを使って子要素を空にする方法が便利です。

element.innerHTML = '';

innerHTMLに空文字を代入すれば、子要素をすべて削除したこと同じ結果が得られます。ちなみに、textContentでも同じことができます。

element.textContent = '';

7.3 まとめ

今回は要素の削除について学びました。removeChildを使う方法とinnerHTML(textContent)を使う方法、両方とも覚えておきましょう。

Last Updated: 2018-5-10 17:49:38