JavaScript

最終更新日：
公開日：

レシピ

HTML・DOM

指定したHTML要素を削除する

指定したHTML要素や子孫要素を削除する方法について解説します。

この記事のポイント

  • 指定したHTML要素自身を削除するときはremoveメソッドを使う
  • 指定したHTML要素の子要素を削除するときはremoveChildメソッドを使う
  • removeChildメソッドは削除したHTML要素を戻り値として取得できる

目次

HTML要素を削除する

ページから特定の要素を削除するときは、removeメソッドかremoveChildメソッドを使います。
removeメソッドは指定したHTML要素自身を削除し、removeChildメソッドは指定したHTML要素の子孫要素を削除します。

以下のHTMLコードに対して、それぞれのメソッドを使用していきます。

HTML コード例

<body>
	<h1>JavaScriptレシピ</h1>
  <ul id="list1">
    <li>テキスト<strong>1</strong></li>
    <li>テキスト<strong>2</strong></li>
    <li>テキスト<strong>3</strong></li>
    <li>テキスト<strong>4</strong></li>
    <li>テキスト<strong>5</strong></li>
  </ul>
</body>

指定したHTML要素を削除する

removeメソッドを使って、指定したHTML要素自身を削除します。
そのHTML要素が子孫要素を持つ場合は、その子孫要素も含めて削除します。

以下の例では、id属性「list1」を持つul要素を取得して、その要素自身を削除します。

JS コード例

let list_element = document.getElementById("list1");
list_element.remove();

このコードを実行すると、削除を実行したあとのHTMLは以下のようになります。

HTML コード例

<body>
	<h1>JavaScriptレシピ</h1>
</body>

指定したHTML要素の子要素を削除する

removeChildメソッドを使って、指定したHTML要素の子要素を削除します。
こちらのメソッドは戻り値として削除したHTML要素を返します。

以下の例では、id属性「list1」を持つul要素を取得して、その最初の子要素のみ削除します。

JS コード例

let list_element = document.getElementById("list1");

let remove_element = list_element.removeChild(list_element.firstElementChild);
console.log(remove_element.textContent); // テキスト1

このコードを実行すると、削除を実行したあとのHTMLは以下のようになります。

HTML コード例

<body>
	<h1>JavaScriptレシピ</h1>
  <ul id="list1">
    <li>テキスト<strong>2</strong></li>
    <li>テキスト<strong>3</strong></li>
    <li>テキスト<strong>4</strong></li>
    <li>テキスト<strong>5</strong></li>
  </ul>
</body>

removeChildメソッドの戻り値として削除した要素を変数remove_elementで取得することで、削除した要素の参照を残すこともできます。

指定したHTML要素の子孫要素を削除する

指定したHTML要素の直下にある子要素ではなく、さらに下に位置する子孫要素をピンポイントで削除する場合はquerySelectorメソッドを使うと便利です。

以下の例では、id属性「list1」を持つul要素の子要素にあたるli要素の、さらに子要素のstrong要素を削除します。

JS コード例

let list_element = document.getElementById("list1");
list_element.querySelector("li strong").remove();

このコードを実行すると、削除を実行したあとのHTMLは以下のようになります。

HTML コード例

<body>
	<h1>JavaScriptレシピ</h1>
  <ul id="list1">
    <li>テキスト</li>
    <li>テキスト<strong>2</strong></li>
    <li>テキスト<strong>3</strong></li>
    <li>テキスト<strong>4</strong></li>
    <li>テキスト<strong>5</strong></li>
  </ul>
</body>

指定したHTML要素の親要素を削除する

指定したHTML要素の親要素を削除する場合は、parentNodeプロパティとremoveメソッドを組み合わせて行います。

以下の例では、リストの最初のli要素を取得してから、parentNodeプロパティとremoveメソッドを使って親要素のul要素を削除します。

JS コード例

let li_element = document.querySelector("li");
li_element.parentNode.remove();

このコードを実行すると、削除を実行したあとのHTMLは以下のようになります。

HTML コード例

<body>
	<h1>JavaScriptレシピ</h1>
</body>

指定したHTML要素の隣り合う要素を削除する

指定したHTML要素の隣り合う要素をする場合は、previousElementSiblingプロパティかnextElementSiblingプロパティと、removeメソッドを組み合わせて行います。

以下の例では、リストの3番目のli要素を取得してから、隣り合う2番目と4番目にあるli要素を削除します。

JS コード例

let li_element = document.querySelector("li:nth-child(3)");

li_element.previousElementSibling.remove();
li_element.nextElementSibling.remove();

このコードを実行すると、削除を実行したあとのHTMLは以下のようになります。

HTML コード例

<body>
	<h1>JavaScriptレシピ</h1>
  <ul id="list1">
    <li>テキスト<strong>1</strong></li>
    <li>テキスト<strong>3</strong></li>
    <li>テキスト<strong>5</strong></li>
  </ul>
</body>

previousElementSiblingプロパティは隣り合う1つ前のHTML要素を取得し、nextElementSiblingプロパティは隣り合う次のHTML要素を取得することができます。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

関連記事

前のページへ 一覧に戻る 次のページへ