jQuery - 要素の削除
公開日：2018-12-12
更新日：2019-05-14
更新日：2019-05-14
1. 概要
要素を削除します。
$(セレクタ).empty() //子要素の削除
$(セレクタ).remove() // 要素の削除
2.1 サンプル - empty()
セレクタで指定された要素の子要素を全て削除します。
セレクタの要素は残ります。
セレクタの要素は残ります。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<style>#test div { border:3px solid skyblue; padding:4px; }</style>
<div id="test">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">A-3</div>
</div>
<!-- Script -->
<script>
$(function() {
$("#test div").empty();
});
</script>
</body></html>
実行結果：画面
2.2 サンプル - remove()
セレクタで指定された要素を全て削除します。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<style>#test div { border:3px solid skyblue; padding:4px;}</style>
<div id="test">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">A-3</div>
</div>
<!-- Script -->
<script>
$(function() {
$("#test div").remove();
});
</script>
</body></html>
実行結果：画面
