jQuery - alih keluar elemen


jQuery - Padam Elemen


Dengan jQuery, anda boleh memadamkan elemen HTML sedia ada dengan mudah.


Padam elemen/kandungan

Untuk memadamkan elemen dan kandungan, anda boleh menggunakan dua yang berikut secara amnya Kaedah jQuery:

  • alih keluar() - alih keluar elemen yang dipilih (dan anak-anaknya)

  • kosong() - alih keluar dari elemen yang dipilih Alih keluar elemen kanak-kanak


kaedah jQuery remove()

Kaedah jQuery remove() mengalih keluar elemen yang dipilih dan elemen anaknya.

Instance

<!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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


kaedah jQuery kosong()

jQuery kosong( ) kaedah memadam Elemen anak bagi elemen yang dipilih.

Instance

<!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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


Tapis elemen yang dialih keluar

kaedah jQuery remove() juga Menerima parameter yang membolehkan anda menapis elemen yang dipadam.

Parameter ini boleh menjadi sebarang sintaks pemilih jQuery.

Contoh berikut mengalih keluar semua <p> elemen dengan class="italic":

Contoh

<!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>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有  class="italic" 的 p 元素。</button>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian