Cara Menggunakan Empty Pada jQuery dan langkah

Halo dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang bagaimana Cara Menggunakan Empty Pada jQuery. Fungsi empty() pada jQuery berfungsi untuk menghapus element, dalam studi case kali ini kita akan menhapus sebuah tag html kemudian nanti kita akan kolaborasikan dengan fungsi yang lainnya seperti html(), children(), attr() dsb.

Pada latihan kali ini saya akan membuat sebuah tampilan foto, kemudian pada saat foto di klik maka namanya akan muncul di bawah foto. Pada pembungkus tag img saya akan memberikan data-title yang kemudian akan di ambil oleh fungsi attr() untuk mengambil value di dalamnya. Baik, langsung saja kita implementasikan Cara Menggunakan Empty Pada jQuery pertama – tama siapkan foto nya dalam latihan kali ini saya menggunakan 3 buah foto.

Kemudian kita load terlebih dahulu library jQuery nya

https://code.jquery.com/jquery-3.3.1.js

1	https://code.jquery.com/jquery-3.3.1.js

Kemudian ketikkan script html nya di bawah ini

<!DOCTYPE html>
<html>
<head>
	<title><strong>Cara Menggunakan Empty Pada jQuery </strong></title>
</head>
<body>
<div data-title="Eno">
	<img src="img/avatar.png">
        <p></p>
</div>
<div data-title="Mila">
	<img src="img/avatar2.png">
        <p></p>
</div>
<div data-title="Raisa">
	<img src="img/avatar3.png">
        <p></p>
</div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title><strong>Cara Menggunakan Empty Pada jQuery </strong></title>

</head>

<body>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

</body>

</html>

Kemudian kita masukkan css nya

div {float: left; margin-right: 20px; border: 1px solid #ccc;}

1	div {float: left; margin-right: 20px; border: 1px solid #ccc;}

Save dengan nama index.html, dan jalankan pada browsernya. Maka saya mempunyai output seperti gambar di bawah ini

Kemudian kita masukkan script jQuery nya

$('div').click(function(){
    var hasil = $(this).attr('data-title');
    $('p').empty();
    $(this).children('p').html('<h1>'+ hasil +'</h1>');
});

$('div').click(function(){

var hasil = $(this).attr('data-title');

$('p').empty();

$(this).children('p').html('<h1>'+ hasil +'</h1>');

});

Kemudian kita masukkan lagi css untuk tag h1

h1{background-color: red; color: white; padding: 10px}

1	h1{background-color: red; color: white; padding: 10px}

Jika sudah save dan refresh pada browser, maka pada saat di klik gambar akan muncul nama di bawah nya secara bergantian

Fungsi empty() berfungsi untuk menhapus tag p kemudian akan di tampilkan kembali dengan $(this).children(‘p’).html(‘<h1>’+ hasil +'</h1>’); inilah yang membuat terjadinya pergantian nama sesuai gambar yang di klik dengan mengkolaborasikan fungsi attr(), children(), html() dan click().

Bagaimana, sangat mudah bukan..??

Sekian pada artikel kali ini tentang Cara Menggunakan Empty Pada jQuery kita berjumpa kembali pada artikel yang akan datang. Semoga bermanfaatm terimakasih dan sampai jumpa.

Cara Menggunakan Empty Pada jQuery

Facebook DUMET School

Categories