JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでリストアイテムを閉じる（非表示にする）方法を解説

Webアプリケーション開発では、ToDoリストや通知一覧など、ユーザーの操作によってリスト項目を削除・非表示にしたいケースが数多くあります。本記事では、JavaScriptを使ってリストアイテムに「×」ボタンを実装し、クリックするとその項目を非表示にする方法を、動作するサンプルコード付きで詳しく解説します。

実装の仕組み

この機能は、HTML・CSS・JavaScriptの3つを組み合わせて実現します。大まかな流れは以下のとおりです。

  • CSSで各リスト項目（<li>）の右端に「×」ボタンを絶対配置する
  • querySelectorAll()でページ内のすべての閉じるボタン（.closeクラス）を取得する
  • forEach()で各ボタンに対してクリックイベントリスナーを登録する
  • クリックされたとき、親要素（<li>）のstyle.displayを"none"に設定して項目を非表示にする

サンプルコード

実際に動作する完全なコードは以下のとおりです。ファイルとして保存し、ブラウザで開くだけで試せます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    ul li {
        border: 1px solid rgb(221, 221, 221);
        background-color: #5a5cec;
        color: white;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        display: block;
        position: relative;
        font-weight: 500;
    }
    ul li:hover {
        background-color: rgb(43, 0, 145);
    }
    .close {
        cursor: pointer;
        position: absolute;
        top: 50%;
        right: 0%;
        padding: 12px 16px;
        transform: translate(0%, -50%);
    }
    .close:hover {
        background: red;
    }
</style>
</head>
<body>
<h1>Closable List Items Example</h1>
<h2>Click 'x' on the list items to close them</h2>
<ul>
<li>Cat<span class="close">×</span></li>
<li>Lion<span class="close">×</span></li>
<li>Tiger<span class="close">×</span></li>
<li>Leopard<span class="close">×</span></li>
<li>Cheetah<span class="close">×</span></li>
</ul>
<script>
    var closebtns = document.querySelectorAll(".close");
    Array.from(closebtns).forEach(item => {
        item.addEventListener("click", () => {
            item.parentElement.style.display = "none";
        });
    });
</script>
</body>
</html>

コードの解説

CSS部分のポイント

<ul>のlist-style-type: none;でデフォルトの箇条書きマークを消し、各<li>にposition: relative;を指定しています。これにより、中にある.closeクラスの「×」ボタンをposition: absolute;＋top: 50%＋transform: translate(0%, -50%)で右端の上下中央に正確に配置できます。また、:hover擬似クラスを使うことで、マウスオーバー時の視覚的なフィードバックも実現しています。

JavaScript部分のポイント

document.querySelectorAll(".close")は、クラス名「close」を持つすべての要素をNodeListとして取得します。NodeListはそのままforEachが使えない環境もあるため、Array.from()で配列に変換してから各要素にイベントリスナーを登録しています。

クリックイベントの中で使われているitem.parentElementは、「×」ボタン（<span>）の親要素、つまり<li>を指します。そこへstyle.display = "none"を設定することで、該当するリスト項目だけが画面から消える仕組みです。

補足：remove()を使う方法

単に非表示にするだけでなく、DOMから完全に要素を取り除きたい場合は、次のようにremove()メソッドを使用することもできます。

item.parentElement.remove();

表示の切り替えと要素の削除は用途に応じて使い分けるとよいでしょう。

実行結果

上記のコードをブラウザで開くと、動物の名前が並んだリストが表示され、各項目の右端に「×」ボタンが配置されます。

JavaScriptでリストアイテムを閉じる（非表示にする）方法を解説

任意の項目の「×」をクリックすると、その項目だけがリストから消えます。下の画像では複数の項目を閉じた後の状態を示しています。

JavaScriptでリストアイテムを閉じる（非表示にする）方法を解説

まとめ

リストアイテムを閉じる機能は、「×」ボタンのクリックイベントで親要素のdisplayをnoneに変更するというシンプルな仕組みで実装できます。ポイントは以下の3点です。

  • <li>にposition: relative;、「×」ボタンにposition: absolute;を設定して配置する
  • querySelectorAll()＋forEach()で複数のボタンにまとめてイベントを登録する
  • parentElement.style.display = "none"で対象項目を非表示にする

このテクニックは、タスク管理アプリや通知リスト、タグの削除機能など、さまざまな場面で応用できます。ぜひ自分のプロジェクトにも組み込んでみてください。

  1. CSSとJavaScriptでToDoリスト（やることリスト）を作成する方法【サンプルコード付き】

    CSSとJavaScriptを組み合わせることで、入力したタスクを一覧表示し、クリックで削除できるシンプルなToDoリスト（やることリスト）をブラウザ上で作成できます。この記事では、実際に動くサンプルコードを交えながら、その実装方法をわかりやすく解説します。 ToDoリストの仕組み 今回作成するToDoリストは、以下の3つの要素で構成されています。 HTML … タスクを入力するテキストボックスと、リストを表示するためのul要素 CSS … 入力欄やリスト項目のデザイン・レイアウトの定義 JavaScript … Enterキーでタスクを追加し、項目クリックで削除する処理 サンプルコー

  2. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>