masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

elemen padam jQuery

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


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492462 permainan