Ketika membuat galeri gambar atau elemen thumbnail di situs web Anda, seringkali diperlukan opsi untuk menghapus atau menghapus gambar. Dalam artikel ini, kita akan membahas cara membuat tombol hapus pada setiap thumbnail dengan menggunakan HTML, CSS, dan JavaScript.
HTML
<div class="img-wrap" data-id="123">
<span class="close">×</span>
<img src="https://i.pinimg.com/236x/40/ab/6a/40ab6a9d00f2c2e3374e5f9ba5a41624.jpg" alt="Image 1">
</div>
<div class="img-wrap" data-id="103">
<span class="close">×</span>
<img src="https://i.pinimg.com/236x/40/ab/6a/40ab6a9d00f2c2e3374e5f9ba5a41624.jpg" alt="Image 2">
</div>Setiap thumbnail dikelilingi oleh elemen div dengan kelas “img-wrap”. Kami juga menambahkan atribut data-id untuk menyimpan ID unik untuk setiap gambar.
CSS
.img-wrap {
position: relative;
display: inline-block;
border: 1px red solid;
font-size: 0;
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
background-color: #FFF;
padding: 10px 10px;
color: #000;
font-weight: bold;
cursor: pointer;
opacity: .6;
text-align: center;
font-size: 22px;
line-height: 10px;
border-radius: 50%;
}
.img-wrap:hover .close {
opacity: 1;
}
Gaya CSS di atas menentukan tata letak dan tampilan thumbnail, serta menetapkan warna dan opacity pada tombol close. Tombol close akan muncul ketika thumbnail dihover.
JavaScript
$('.img-wrap .close').on('click', function() {
var id = $(this).closest('.img-wrap').data('id');
alert('Remove picture with ID: ' + id);
// Implementasi logika penghapusan gambar sesuai kebutuhan Anda
});
Script JavaScript ini menangani klik pada tombol close. Ketika tombol tersebut diklik, ia menemukan parent terdekat dengan kelas “img-wrap” dan mendapatkan data-id dari thumbnail tersebut. Anda dapat mengganti bagian alert dengan logika penghapusan gambar yang sesuai dengan kebutuhan proyek Anda.
Dengan langkah-langkah ini, Anda dapat dengan mudah menambahkan tombol hapus pada setiap thumbnail dalam galeri gambar atau elemen lainnya di situs web Anda.
