jQuery - 要素の削除

公開日：2018-12-12 更新日：2019-05-14
[jQuery]

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>

実行結果：画面



Tag

New Article