Belajar JQuery Part 10 : Menghapus Element Dengan JQuery

Menghapus Element Dengan JQuery
Setelah ada tutorial sebelumnya di www.malasngoding.com anda mempelajari tentang cara menambah element dengan JQuery, menetapkan nilai dan value pada element HTML, serta belajar cara mendapatkan nilai dan value pada element HTML dengan menggunakan JQuery. maka pada tutorial belajar JQuery Part 10 ini akan di jelaskan tentang cara menghapus element HTML dengan JQuery.
Belajar JQuery Part 10 : Menghapus Element Dengan JQuery
Untuk menghapus element HTML dengan JQuery, JQuery telah menyediakan sebuah fungsi yang berguna untuk menghapus element HTML yaitu bisa menggunakan fungsi remove(). fungsi remove() pada JQuery adalah sebuah fungsi yang di sediakan oleh JQuery untuk menghapus element HTML untuk keperluan sesuatu. untuk lebih jelasnya dan menambah pemahaman dari fungsi remove untuk menghapus element HTML dengan JQuery silahkan perhatikan contoh cara menggunakan fungsi remove() pada jquery berikut ini.
index.html
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 |
<!DOCTYPE html> <html> <head> <title>Tutorial 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 | www.malasngoding.com</h1> <button class="tombol">Tombol</button> <div class="kotak"> <span>INI ADALAH KOTAK</span> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $('.tombol').click(function(){ $('.kotak').remove(); }); }); </script> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
body{ font-family: sans-serif; } h1{ text-align: center; } .kotak{ width: 300px; height: auto; background: orange; padding: 30px; color: #fff; margin-bottom: 20px; } .tombol{ color: #fff; background: #232323; border: none; padding: 10px; } |

menghapus element dengan jquery
See the Pen adpaVa by Malas Ngoding (@malasngoding) on CodePen.0
pada contoh di atas bisa di perhatikan bahwa fungsi remove() di gunakan untuk menghapus element html. Menghapus Element Dengan JQuery
1 2 3 |
$('.tombol').click(function(){ $('.kotak').remove(); }); |
pada saat tombol di klik maka fungsi remove() di jalankan pada element html yang memiliki class kotak untuk menghapus element kotak. sekian tutorial cara Menghapus Element Dengan JQuery serta contoh penggunaannya. pada tutorial selanjutnya tentang jquery akan di bahas tentang cara menambah class pada elemet html dan cara menghapus class pada element html dengan menggunakan bantuan JQuery.
Tutorial Menarik Lainnya

Membuat Pencarian Tanpa Reload Dengan PHP Dan Ajax JQuery


Membuat Halaman Web Ajax Tanpa Reload dengan JQuery


Show Hide Form Password Dengan JQuery

