Menghapus Element Dengan JQuery
Untuk menghapus element HTML dengan JQuery, JQuery telah menyediakan sebuah fungsi yang berguna untuk menghapus element HTML yaitu dengan menggunakan fungsi remove(). Fungsi remove() pada JQuery adalah fungsi yang disediakan oleh JQuery untuk menghapus element HTML untuk keperluan sesuatu. Untuk lebih jelasnya dan menambah pemahaman dari fungsi remove untuk mengapus element HTML dengan JQuery silahkan sobat perhatikan contoh cara menggunakan fungsi remove() pada JQuery berikut
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar JQuery Part 10 : Menghapus Element Dengan JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Remove Function JQuery<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button>Klik Disini</button>
<div class="kotak">
<span>Ini Adalah Kotak Beibeh</span>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('.kotak').remove();
});
});
</script>
</html>
style.css
body{
font-family: raleway;
}
h1{
text-align: center;
}
.kotak{
width: 300px;
height: auto;
background: crimson;
padding: 30px;
color: #fff;
margin-bottom: 15px;
}
button{
color: crimson;
background: transparent;
border: 1px solid crimson;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
button:hover{
color: white;
background: crimson;
border: 1px solid crimson
} |
| Remove Elemen JQuery |
KESIMPULAN
Pada contoh di atas bisa diperhatikan bahwa fungsi remove() digunakan untuk menghapus element HTML
$('.tombol').click(function(){Pada saat tombol diklik maka fungsi remove dijalankan pada element HTML yang memilki class kotak untuk menghapus element kotak. Sekian tutorial Menghapus Element Dengan JQuery , Sekian Terima Kasih
$('.kotak').remove();
});
EmoticonEmoticon