jQuery-要素の削除
7176 ワード
要素とコンテンツを削除するには、一般的に次の2つのjQueryメソッドを使用します.
jQuery remove()メソッドjQuery remove()メソッドは、選択された要素とそのサブ要素を削除します.
jQuery remove()メソッドでは、削除された要素をフィルタリングできるパラメータも使用できます.
例:
jQuery empty()メソッドjQuery empty()メソッド選択された要素のサブ要素を削除します.
jQuery remove()メソッドjQuery remove()メソッドは、選択された要素とそのサブ要素を削除します.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="/jquery/jquery-1.11.1.min.js"></script>
5 <script>
6 $(document).ready(function(){
7 $("button").click(function(){
8 $("#div1").remove();
9 });
10 });
11 </script>
12 </head>
13
14 <body>
15
16 <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
17 This is some text in the div.
18 <p>This is a paragraph in the div.</p>
19 <p>This is another paragraph in the div.</p>
20 </div>
21
22 <br>
23 <button> div </button>
24
25 </body>
26 </html>jQuery remove()メソッドでは、削除された要素をフィルタリングできるパラメータも使用できます.
例:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="/jquery/jquery-1.11.1.min.js"></script>
5 <script>
6 $(document).ready(function(){
7 $("button").click(function(){
8 $("p").remove(".italic"); /* ， class=“italic”*/ 9 });
10 });
11 </script>
12 </head>
13
14 <body>
15
16 <p>This is a paragraph in the div.</p>
17 <p class="italic"><i>This is another paragraph in the div.</i></p>
18 <p class="italic"><i>This is another paragraph in the div.</i></p>
19 <button> class="italic" p </button>
20
21 </body>
22 </html>jQuery empty()メソッドjQuery empty()メソッド選択された要素のサブ要素を削除します.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="/jquery/jquery-1.11.1.min.js"></script>
5 <script>
6 $(document).ready(function(){
7 $("button").click(function(){
8 $("#div1").empty();
9 });
10 });
11 </script>
12 </head>
13
14 <body>
15
16 <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
17 This is some text in the div.
18 <p>This is a paragraph in the div.</p>
19 <p>This is another paragraph in the div.</p>
20 </div>
21
22 <br>
23 <button> div </button>
24
25 </body>
26 </html>