JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.remove()で要素の削除

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.remove()

JavaScriptの.remove()で要素の削除

JavaScriptの.remove()で要素の削除

.remove() を使うことで要素の削除が可能です。ここでは、JavaScriptの.remove() を使ったサンプルと合わせて解説します。

.remove()を使ったサンプル

まずはじめに、.remove() で要素の削除を行うサンプルです。このサンプルでは、ボタンをクリックして要素を削除してみます。

以下の idが#deleteBtn1のボタン を選択すると、その上部の ボタンで削除される要素 を削除されます。

ボタンで削除される要素

.remove()を使ったコード

それでは、上記サンプルのHTMLを見てみましょう。

<p id="deleteconpo">ボタンで削除される要素</p>
<button id="deleteBtn1">idが#deleteBtn1のボタン</button>

このように、HTMLでは p タグと button タグのシンプルな構成です。

そして、以下が対象のJavaScriptです。

document.querySelector('#deleteBtn1').addEventListener('click', () => {    
  const element = document.getElementById('deleteconpo');    
  element.remove();   
});

順に使われている語句を説明していくと、まずquerySelectordeleteBtn1 を、addEventListener でクリック条件を設定します。

次に、const element で、対象のidを指定するgetElementById の関数宣言をして、最後に.remove() で要素の削除を行います。

.querySelector()

querySelector() は、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。

上記のようなdocument.querySelector('#deleteBtn1') の場合、id属性「#deleteBtn1」を持つHTML要素(ボタン)を返しています。