Selamat berakhir pekan teman-teman, disini saya akan membertitahukan bagaimana cara menambah dan menghapus teks ketika di click dengan jquery, jadi dimana ketika kita mempunyai tombol tambah misalnya, ketika tombol dengan value tambah itu kita click maka akan muncul sebuah paragraf dimana paragraf itu akan terus bertambah ketika kita mengclicknya, dan ketika sudah terasa cukup untuk sebuah teksnya, kita bisa menghapus semuanya, jadi disini saya menghapus semuanya ya, bukan satu persatu.
Oke kita mulai cara menambah dan menghapus teks ketika di click dengan jquery, lagi-lagi dengan jquery, ya karena jquery lah kita bisa membuat seperti ini, oiya teks yang akan tampil itu, teksnya berupa sama ya, jadi tidak berbeda-beda, dan kita juga tidak menginput sebuah teksnya, jadi teks sudah kita siapkan di sebuah kode jquerynya, jadi yang kita lakukan hanya mengklik tombolnya saja, dan teks itu akan muncul, dan method yang saya pakai di jquery ini adalah method prepend, click, remove. Pasti sudah pernah menggunakannya bukan, jadi prepend itu adalah dimana teks itu akan muncul setelah apa, dan event click adalah ketika tombol di click, dan remove seperti yang teman-teman tau adalah ketika kita menekan tombol hapus, dan kita berikan efek jquery remove maka kita akan hapus semua.Oke sekarang silahkan teman-teman perhatikan struktur HTML dan Jquery berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<html> <head> <title>Cara Menambah dan Menghapus Teks Ketika di Click dengan Jquery</title> <style type="text/css"> button{ width: 120px; float: left; text-align: center; margin: 5px; border: 2px solid; font-weight: bold; height: 50px; } .container{ margin: auto; width: 500px; border:2px solid pink; padding: 20px; } .clear{ clear: both; } p{ text-align: justify; } </style> </head> <body> <div class="container"> <h1>Cara Menambah dan Menghapus Teks Ketika di Click dengan Jquery</h1> <button class="button tambah">Tambah Teks</button> <button class="button hapus">Hapus Semua Teks</button> <div class="clear"></div> <div class="print"></div> </div> <!-- Bagian JQUERY --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.tambah').click(function(){ $('.print').prepend('<p> Pada artikel kali ini, sebenarnya sudah sering kita buat, pada saat kita belajar HTML dan CSS, tetapi disini saya akan mencoba membuat sedikit berbeda, dimana biasanya yang kita hover adalah sebuah tulisan ketika huruf itu di arahkan dengan sebuah crusor maka efek timbul yang berada pada hover yang sudah kita style, tetapi disini saya akan mencoba membuatnya dengan menggunakan sebuah gambar, oke bagaimana saya membuat Cara Membuat Hover Beruntun di dalam Study Kasus dengan Jquery simak terus ya teman-teman.</p>'); }); $('.hapus').click(function(){ $('p').remove(); }); }); </script> </body> </html> |
Coba teman-teman perhatikan terlebih dahulu, di atas saya mensisipkan, teks dari artikel saya sebelumnya, jadi silahkan teman-teman masukan teks boleh, atau conten ya lain juga boleh, oke sekarang kita lihat hasilnya ya:
Hasilnya seperti di atas ya, jika ada 2 paragraf berarti saya sudah mengklik dua kali ya, dan ketika saya mengklik tombol hapus semua teks, maka yang terjadi adalah teks yang di bawah akan terhapus semua, oke saya rasa cukup sampai disini dulu belajar kita tentang cara menambah dan menghapus teks ketika di click dengan jquery, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.