JavaScript は ID で要素を削除する
Harshit Jindal
2023年1月30日
-
JavaScript で
outerHTML属性を空の文字列に設定して ID によって要素を削除する -
ID で JavaScript で
removeChild()を使用して要素を削除する -
ID で JavaScript で
remove()を使用して要素を削除する
このチュートリアルでは、JavaScript で ID を使用して HTML 要素を削除する方法を紹介します。
JavaScript で outerHTML 属性を空の文字列に設定して ID によって要素を削除する
この方法では、要素を選択し、空の文字列を割り当てて HTML コンテンツを消去します。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
document.getElementById("removeme").outerHTML = "";
</script>
</html>
これは簡単な方法ですが、次の制限があるため、ほとんど使用されません。
removeChild()やremove()などの他の新しい ES5 メソッドよりも速度が 5〜10％遅くなります。- 古いバージョンの Internet Explorer ではサポートされていません。
ID で JavaScript で removeChild() を使用して要素を削除する
最初にその ID を使用して要素を選択し、次にこのメソッドでその親の removeChild() 関数を呼び出します。この方法には、DOM のツリー構造を維持するという利点があります。
親ノード自体を削除しないように、ツリーから要素を削除する内部動作を模倣する必要があります。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
function remove(id)
{
var element = document.getElementById(id);
return element.parentNode.removeChild(element);
}
remove("removeme");
</script>
</html>
ID で JavaScript で remove() を使用して要素を削除する
remove() メソッドは ES5 の一部として導入されました。これにより、親に移動せずに要素を直接削除できます。ただし、removeChild() メソッドとは異なり、削除されたノードへの参照は返されません。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
document.getElementById("removeme").remove();
</script>
</html>
著者： Harshit Jindal
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn