2011年6月8日水曜日

jQueryのempty()とremove()

jQueryは似たようなセレクターやメソッドがいくつか存在しますが、比べてみることでその違いをはっきりさせておくと覚え易いです。

empty()メソッドとremove()メソッドの違い。
  • empty()は中身を削除する。
  • remove()はそのもの本体ごと削除する。
  • remove([exp])でセレクターの条件にあったものだけ削除されます。

例:
html

jQuery(empty and remove)

  • 1.Text
  • 2.TextStrongTextTextEm
  • 3.TextStrongText
  • 4.TextiTextText

cssは分かりやすいように色付け(お好みで)

li {
  background-color: lavender;
  border: 1px solid royalblue;
  height: auto;
  width : 400px;
  padding: 5px; 
}

strong {
  background-color: seashell;
  border: 1px solid fuchsia;
}

em {
  background-color: beige;
  border: 1px solid chocolate;
}

i {
  background-color: lightsalmon;
  border: 1px solid tomato;
}


jQuery部分
empty()とremove()とremove([exp])で変化を見ます
jQuery(function() {
 //liにempty()を適用します
 $("#btn1").click(function() {
  $('li').empty();
 }); 
 //liにremove()を適用します
 $("#btn2").click(function() {
  $('li').remove();
 }); 
 //em要素が含まれるliにremove()が適用されます
 $("#btn3").click(function() {
  $('li').remove(':has(em)');
 }); 
 //文字列[Strong]が含まれるliにremove()が適用されます
 $("#btn4").click(function() {
  $('li').remove(':contains("Strong")');
 });
});

初期状態

empty()を使用した場合

remove()を使用した場合

remove(':has(em)')を使用した場合

remove(':contains("Strong")')を使用した場合

0 件のコメント:

コメントを投稿