Dengan jQuery, kita bisa lebih mudah untuk menghapus elemen HTML yang ada.
Section Artikel
Hapus Elemen / Konten
Untuk menghapus elemen dan konten, ada dua metode jQuery yaitu :
remove()– Menghapus elemen yang dipilih (dan elemen anaknya)kosong()– Menghapus elemen anak dari elemen yang dipilih
Metode jQuery remove ()
Metode jQuery remove() berfungsi untuk menghapus elemen yang dipilih dan elemen anaknya.
Contoh :
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/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:blue;"> Ini adalah beberapa teks di div. <p> Ini adalah paragraf di div. </p> <p> Ini adalah paragraf lain di div. </p> </div> <br> <button>Hapus elemen div </button> </body> </html>
Metode jQuery empty() Metode
Metode jQuery empty() berfungsi untuk menghapus elemen anak dari elemen yang dipilih.
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/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:red;">
Ini adalah beberapa teks di div.
<p> Ini adalah paragraf di div. </p>
<p> Ini adalah paragraf lain di div. </p>
</div>
<br>
<button>Hapus elemen div </button>
</body>
</html>Saring Elemen yang Akan Dihapus
Metode jQuery remove() juga dapat menerima satu parameter, yang memungkinkan ktia memfilter elemen yang akan dihapus.
Parameternya dapat berupa sintaks selektor jQuery apa pun.
Contoh berikut menghapus semua elemen <p> dengan class = "test":
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".test");
});
});
</script>
<style>
.test {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p> Ini adalah paragraf. </p>
<p class = "test"> Ini adalah paragraf lain. </p>
<p class = "test"> Ini adalah paragraf lain. </p>
<button> Hapus semua elemen p dengan class = "test" </button>
</body>
</html>Contoh ini menghapus semua elemen <p> dengan class = "test" dan class = "demo":
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".test, .demo");
});
});
</script>
<style>
.test {
color: red;
font-size: 20px;
}
.demo {
color: green;
font-size: 25px;
}
</style>
</head>
<body>
<p> Ini adalah paragraf. </p>
<p class = "test"> Ini adalah elemen p dengan class = "test". </p>
<p class = "test"> Ini adalah elemen p dengan class = "test". </p>
<p class = "demo"> Ini adalah elemen p dengan class = "demo". </p>
<button> Hapus semua elemen p dengan class = "test" dan class = "demo" </button>
</body>
</html>