jQuery 「detach」要素を一時的に削除する

.detach()メソッドは.remove()メソッドと同様に条件にマッチした要素をDOMから削除しますが、remove()が要素に関連するイベントハンドラやデータも一緒に削除するだけなのに対して、.detach()は削除した要素を保存しておいて、後でまたDOMに追加できます。

書式

$( 対象要素 ).detach( セレクタ );

var tmpElem = $('h1').detach();

サンプル

「消す」ボタンでコンテンツを一時的に削除、「復活」ボタンで付箋の最後に戻す

<body>
  <style>
    .sticky {
      background: #aaa;
    }
  </style>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <div class="sticky">
          <p>鮭おにぎり</p>
        </div>
        <div class="sticky">
          <p>のりおにぎり</p>
        </div>
        <div class="sticky">
          <p>梅干しおにぎり</p>
        </div>
        <div class="sticky">
          <p>タラコおにぎり</p>
        </div>
        <button class="button" id="detach" type="button">消す</button>
        <button class="button" id='restore' type="button">消した付箋を復活</button>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxx all rights reserved.</p>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        $('#detach').on('click',function(){
          tmp = $('.sticky:first').detach();
        });
        $('#restore').on('click',function(){
          tmp.insertAfter('.sticky:last');
        });
      });
    </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery