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")')を使用した場合