JavaScript | クリックした要素を削除(非表示)する方法

javascript DOM操作,JavaScript

クリックした要素を削除(非表示)する方法

JavaScriptを使ってクリックしたHTTMLの要素を削除(非表示)する方法のまとめです。

idからクリックした要素を削除(非表示)にする方法

クリックした要素のIDから要素を指定して非表示にする方法です。

※右下のRerunボタンで操作やり直すことができます。

See the Pen JavaScript Delete the element by yochans (@yochans) on CodePen.

サンプルでは、id名「item_1」が付与されている要素に対してクリックイベントを追加、クリックされたらその要素が非表示となります。

クリックする要素は、削除ボタンなど別の要素にしたりもすると思います。

<div class="container">
	<div id="item_1"></div>
</div>
const target = document.getElementById('item_1');

target.addEventListener('click', () => {	
	target.style.display = "none";	
}, false);

「display: none」の指定で要素を非表示にした場合、非表示にした要素のスペースが無くなるので続く要素が詰まって表示されます。
要素を詰めない場合は「position」指定の要素としておくか「opacity(透過値)」にて「0」を指定することで実装することが可能です。

const target = document.getElementById('item_1');

target.addEventListener('click', () => {	
	target.style.opacity = "0";	
}, false);

classからクリックした要素を削除(非表示)にする方法

連続する要素に対して、class名からクリックした要素を削除(非表示)にする方法です。

※右下のRerunボタンで操作をやり直すことができます。

See the Pen JavaScript Delete the element2 by yochans (@yochans) on CodePen.

<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
</div>
const target = document.getElementsByClassName('item');

for (let i = 0; i < target.length; i++) {
	target[i].addEventListener('click', () => {
		target[i].style.display = "none";	
	}, false);
}

「getElementsByClassName」にて取得した要素群は、全体でのクリックイベント指定はエラーとなって指定できませんので、for文で各子要素に対してクリックイベント及び削除処理を個別指定しています。

また、「display: none」の指定で要素を非表示にした場合、非表示にした要素のスペースが無くなるので続く要素が詰まって表示されます。
削除時に要素を詰めない場合は「opacity(透過値)」にて「0」を指定することで実装することが可能です。

See the Pen JavaScript Delete the element3 by yochans (@yochans) on CodePen.

※右下のRerunボタンで操作をやり直すことができます。

const target = document.getElementsByClassName('item');

for (let i = 0; i < target.length; i++) {
	target[i].addEventListener('click', () => {
		target[i].style.opacity = "0";
	}, false);
}