jQueryのempty()とremove()

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

empty()メソッドとremove()メソッドの違い。

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

例:
html

view plainprint?

1. <h1>jQuery(empty and remove)</h1><ul><li id="first">1.Text</li>  
2. <li id="second">2.Text<b>Strong</b>TextText<i>Em</i></li>  
3. <li id="third">3.Text<b>Strong</b>Text</li>  
4. <li id="fourth">4.Text<i>i</i>TextText</li>  
5. </ul><form action=""><input id="btn1" type="button" value="empty">  
6.    <input id="btn2" type="button" value="remove">  
7.    <input id="btn3" type="button" value="remove(':has(em)')">  
8.    <input id="btn4" type="button" value="remove(':contains("Strong" )')">  
9.   </form>  

jQuery(empty and remove)
1.Text
2.TextStrongTextTextEm
3.TextStrongText
4.TextiTextText

   
   
   
  

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

view plainprint?

1. li {  
2.   background-color: lavender;  
3.   border: 1px solid royalblue;  
4.   height: auto;  
5.   width : 400px;  
6.   padding: 5px;   
7. }  
8.   
9. strong {  
10.   background-color: seashell;  
11.   border: 1px solid fuchsia;  
12. }  
13.   
14. em {  
15.   background-color: beige;  
16.   border: 1px solid chocolate;  
17. }  
18.   
19. i {  
20.   background-color: lightsalmon;  
21.   border: 1px solid tomato;  
22. }  

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])で変化を見ます

view plainprint?

1. jQuery(function() {  
2.  //liにempty()を適用します  
3.  $("#btn1").click(function() {  
4.   $('li').empty();  
5.  });   
6.  //liにremove()を適用します  
7.  $("#btn2").click(function() {  
8.   $('li').remove();  
9.  });   
10.  //em要素が含まれるliにremove()が適用されます  
11.  $("#btn3").click(function() {  
12.   $('li').remove(':has(em)');  
13.  });   
14.  //文字列[Strong]が含まれるliにremove()が適用されます  
15.  $("#btn4").click(function() {  
16.   $('li').remove(':contains("Strong")');  
17.  });  
18. });  

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