【javaScript・jQuery】クリックした要素を削除する

例えば、ビンゴゲームの番号を追加していくサイトを作ったとして、

間違った番号を追加したときに、その番号の要素を削除したいと思いますよね!

そんなときに、要素をクリックしたら、その対象の要素が削除されるようになるソースコードを紹介します。

やることは簡単で、要素にクリックイベントを付与して、「$(this).remove();」でクリックした要素を削除しているだけです。

「 $(this) 」でクリックした要素を取得できます。

[サンプル]

下記の文章をクリックすると、その要素が消えます。

「この文章のどこかをクリックしたら消える」

ソースコードを紹介します。
[index.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div class="deleteEvent" style="background-color: red;">「この文章のどこかをクリックしたら消える」</div>
    <script src="index.js"></script>
</body>
</html>

[index.js]

/**
 * 初期化
 */
$(function () {
    $(document).on("click", ".deleteEvent", function (e) {
        // $(this)でイベントが発生した要素を取得して削除する
        $(this).remove();
    });
});

スポンサーリンク

javaScript, jQuery

Posted by ton