Ok selanjutnya saya akan menunjukkan kepada anda bagaimana untuk membuat sesuatu seperti elemen div atau elemen yang lainnya menghilang bila tombol gambar atau link delete diklik, penasaran berikut ini demonya silahkan klik tombol delete / tanda silang dibawah:
Contoh heading / Judul
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.
Contoh heading / Judul
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.
berikut saya perlihatkan codingnya :
$(".panel .delete").click(function(){
$(this).parents(".panel").animate({ opacity: 'hide' }, "slow");
});
Integrasi coding diatas dengan css dan html adalah sebagai berikut:
<script type="text/javascript" src="NamaFileJquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".panel .delete").click(function(){
$(this).parents(".panel").animate({ opacity: 'hide' }, "slow");
});
});
</script>
<style type="text/css">
.panel {
background: #edf5e1;
padding: 10px 20px 10px;
margin:0 auto;
width: 450px;
position: relative;
border-top: solid 2px #c4df9b;
}
.panel .delete {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.panel h5{
background: #edf5e1;
padding: 10px 20px 10px;
position: relative;
border-top: solid 2px #c4df9b;
}
.panel .delete {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
<div class="panel">
<h5>Contoh heading / Judul</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt, enim massa gravida metus,
commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<img src="images/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="panel">
<h5>Contoh heading / Judul</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada,
ante at feugiat tincidunt, enim massa gravida metus,
commodo lacinia massa diam vel eros. Proin eget urna.
Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<img src="images/btn-delete.gif" alt="delete" class="delete" />
</div>
elemen yang memiliki class = "delete" merupakan child atau anak dari elemen dengan class = "panel" atau dalam hal ini disebut parent, dengan jQuery diatas maka pada saat class ="delete" di klik maka element panel akan di sembunyikan $(this).parents(".pane").animate({ opacity: 'hide' }, "slow") . silahkan coba dan praktekan sendiri.
