「JavaScript」removeChildで指定要素を削除する
環境
Google Chrome 99.0.4844.51
書式
親ノード.removeChild(子ノード);
removeChildメソッドを使って、引数の子ノードを削除します。
使用例
<!DOCTYPE html>
<html>
<body>
<div id="cftA">
<div id="cftB">
<p>test data 1111</a>
</div>
<div id="cftC">
<p>test data 2222</a>
</div>
</div>
<input type="button" value="削除" onclick="delBtn()">
<script>
function delBtn(){
const ge = document.getElementById("cftA");
ge.removeChild(cftB);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="cftA">
<div id="cftB">
<p>test data 1111</a>
</div>
<div id="cftC">
<p>test data 2222</a>
</div>
</div>
<input type="button" value="削除" onclick="delBtn()">
<script>
function delBtn(){
const ge = document.getElementById("cftA");
ge.removeChild(cftB);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="cftA">
<div id="cftB">
<p>test data 1111</a>
</div>
<div id="cftC">
<p>test data 2222</a>
</div>
</div>
<input type="button" value="削除" onclick="delBtn()">
<script>
function delBtn(){
const ge = document.getElementById("cftA");
ge.removeChild(cftB);
}
</script>
</body>
</html>
実行結果
「削除」ボタンを押すと、指定したdiv要素「cftB」が削除されます。