[jQuery]要素の削除

要素を削除する操作のメモ。

使用するメソッド

• empty
• remove
• detach

今回は下記のhtmlを基本として各操作を行う。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

empty

指定した要素の値を削除する。

$('ul > li:eq(1)').empty();

実行結果

<ul>
    <li>1</li>
    <li></li>
    <li>3</li>
</ul>

また値だけでなく、指定した子要素全体を削除することも出来る。

$('ul').empty();

実行結果

<ul>
</ul>

remove

指定した要素を削除する。

$('ul > li:eq(1)').remove();

実行結果

<ul>
    <li>1</li>
    <li>3</li>
</ul>

<ul>のように子要素を含む場合は、<ul>タグ含め配下の要素も削除する。

$('ul').remove();

またclassやidなどのセレクタが用意されている場合、セレクタをremoveの引数で指定して削除することも可能。

<ul>
    <li>1</li>
    <li class="second">2</li>
    <li>3</li>
</ul>

<script>
$(function() {
    $('li').remove('.second');
}) 
</script>

実行結果

<ul>
    <li>1</li>
    <li>3</li>
</ul>

detach

removeと同様、要素の削除を行うことができる。

$('ul').detach();//ulタグと配下の要素を削除する。

 $('li').detach('.second');// secondクラスのliタグを削除する。

remove()とほとんど同じだが、detachで削除した場合は削除要素と関連づけられた情報を保持することが出来る。
つまり削除後も情報を再利用したい場合に使用する。

例えば下記のhtmlファイルがあった時

<ul>
  <li>1</li>
  <li class="second">2</li>
  <li>3</li>
</ul>
<button>click</button>

下記の記述で再表示後もアラートメッセージを表示することができる。

$(function() {
    $('.second').click(function() {
      alert('second clicked');
    })

    var obj;
    $('button').click(function() {
      if($('.second').get(0)) {
        obj = $('li').detach('.second');
      } else {
        $('ul').append(obj);
      }
    })
});