Elemen HTML sedia ada boleh dipadamkan dengan mudah dengan jQuery.
Padam elemen/kandungan
Untuk memadamkan elemen dan kandungan, anda boleh menggunakan dua kaedah jQuery berikut secara amnya:
remove() - mengalih keluar elemen yang dipilih (dan elemen anaknya)
empty() - mengalih keluar elemen anak daripada elemen yang dipilih
kaedah jQuery remove()
kaedah jQuery remove() mengalih keluar elemen yang dipilih dan elemen anaknya.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> 这是 div 中的一些文本。 <p>这是在 div 中的一个段落。</p> <p>这是在 div 中的另外一个段落。</p> </div> <br> <button>移除div元素</button> </body> </html>
Jalankan atur cara dan cuba
kaedah jQuery empty()
kaedah jQuery empty() dipadamkan Elemen anak bagi elemen yang dipilih.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").empty(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> 这是 div 中的一些文本。 <p>这是在 div 中的一个段落。</p> <p>这是在 div 中的另外一个段落。</p> </div> <br> <button>清空div元素</button> </body> </html>
Jalankan program dan cuba
Tapis elemen yang dipadam
Kaedah jQuery remove() juga boleh digunakan Menerima parameter yang membolehkan anda menapis elemen yang dipadam.
Parameter ini boleh menjadi sebarang sintaks pemilih jQuery.
Contoh berikut mengalih keluar semua <p> elemen class="italic":
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p class="italic"><i>这是class="italic"的段落。</i></p> <p class="italic"><i>这是class="italic"的段落。</i></p> <button>移除所有 class="italic" 的 p 元素。</button> </body> </html>
Jalankan program untuk mencubanya