【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();
});
});