JavaScriptでボタンクリック時にli要素を削除する方法

Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各

要素（li）に配置した「削除」ボタンをクリックすることで、該当する

要素をJavaScriptだけで削除する方法を解説します。

前提：対象となる順序なしリスト（ul）

例として、次のような順序なしリスト（ul）を想定します。

<ul>
    <li class="subjectName">JavaScript <button>Remove</button></li>
    <br>
    <li class="subjectName">MySQL <button>Remove</button></li>
    <br>
    <li class="subjectName">MongoDB <button>Remove</button></li>
    <br>
    <li class="subjectName">Java <button>Remove</button></li>
</ul>

ご覧のとおり、それぞれの

要素には「Remove」ボタンが付いています。このボタンをクリックすると、対応する

要素だけをリストから取り除くことができます。

サンプルコード

ボタンのクリックで

要素を削除する完全なコードは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<h1>科目を削除する</h1>
<h2>科目一覧は以下の通りです：</h2>
<ul>
<li class="subjectName">JavaScript <button>Remove</button></li>
<br>
<li class="subjectName">MySQL <button>Remove</button></li>
<br>
<li class="subjectName">MongoDB <button>Remove</button></li>
<br>
<li class="subjectName">Java <button>Remove</button></li>
</ul>
<script>
    var allSubjectName = document.querySelectorAll(".subjectName");
    for (var index = 0; index < allSubjectName.length; index++){
        allSubjectName[index].addEventListener("click", function(){
            this.classList.toggle("active");
        });
        allSubjectName[index].querySelector("button").addEventListener("click",
        function(){
            this.closest(".subjectName").remove();
        });
    }
</script>
</body>
</html>

コードのポイント

document.querySelectorAll(".subjectName")：subjectNameクラスを持つすべての
要素をまとめて取得します。
addEventListener("click", ...)：各
要素とその中の
this.closest(".subjectName")：クリックされたボタンから見て最も近い.subjectNameの祖先要素（つまり、そのボタンが属する
要素）を取得します。これにより、「どのボタンが押されたか」に応じて正しい行だけを削除できます。
.remove()：取得した
要素をDOMから丸ごと削除する標準メソッドです。

ちなみに、forループの代わりにforEach()やイベント委譲（親要素でイベントを受け取る方式）を使うと、よりモダンで拡張性の高い実装になります。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「index.html」などとして保存し、そのファイルを右クリックします。VS Codeエディタの場合は、「Open with Live Server」を選択してブラウザで開きましょう。

実行結果

ブラウザで開くと、次のように科目の一覧と各項目の「Remove」ボタンが表示されます。

JavaScriptでボタンクリック時にli要素を削除する方法

ここで、試しに「MySQL」と「MongoDB」をリストから削除してみます。

「MySQL」と「MongoDB」の横にある「Remove」ボタンをそれぞれクリックすると、以下のように該当する

要素だけが取り除かれた状態になります。

JavaScriptでボタンクリック時にli要素を削除する方法

このように、querySelectorAll()で要素を取得し、closest()とremove()を組み合わせるだけで、jQueryなどのライブラリに頼らずとも、ボタンクリックによる

要素の個別削除を簡単に実現できます。

JavaScriptでプロトタイプメソッドを使ってコンストラクタ関数の変数にアクセスする方法

JavaScriptでMap（マップ）の値を1つの文字列に結合する方法

ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説
Webページを作成していると、ボタンをクリックしたタイミングで特定の要素を表示・非表示に切り替えたい場面はよくあります。この記事では、JavaScriptのstyle.displayを使って、ボタンクリック時にdiv要素を非表示にする方法を具体的なコード例とともに解説します。基本となるdiv要素の準備まず、操作対象となる以下のようなdiv要素を用意します。<div id=showOrHide> Welcome in JavaScript </div>次に、クリックすると上記のdivが非表示になるボタンを配置します。onclick属性に関数名を指定するのがポイントです。&
JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説
要素を新しく作成するには add() メソッドを使用し、作成・追加済みの要素を削除するには remove() メソッドを使用します。本記事では、テキストボックスに入力した名前をボタンクリックでリストに追加し、各項目の「Remove Name」ボタンで削除できるシンプルなアプリを例に、その実装方法を解説します。実装例（サンプルコード） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view