This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element. Consider the following HTML:
1
2
3
4
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
We can target any element for removal:
1
$( ".hello" ).empty();
This will result in a DOM structure with the Hello text deleted:
1
2
3
4
<div class="container">
<div class="hello"></div>
<div class="goodbye">Goodbye</div>
</div>
If we had any number of nested elements inside <div class="hello">, they would be removed, too.
To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.
If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use .detach() instead.
Kali ini saya akan menjelaskan cara penggunaan JQuery Add Element/Content dan Remove Element/Content. Pertama-tama kita harus method yang digunakan untuk menambah dan menghapus elemen atau konten pada HTML.
Add -- Menambah Elemen atau Konten :
- append() - Menyisipkan elemen/konten di akhiran elemen yang dipilih
- prepend() - Menyisipkan elemen/konten di awalan elemen yang dipilih
- after() - Menyisipkan elemen/konten setelah elemen yang dipilih
- before() - Menyisipkan elemen/konten sebelum elemen yang dipilih
Remove -- Menghapus Elemen atau Konten :
- remove() - Menghapus elemen yang dipilih beserta anak elemen(child element)
- empty() - Mengosongkan anak elemen(child element) dari elemen yang dipilih
Contoh JQuery Add
Contoh JQuery Remove
Kerjakan Soal
Submit
|Test disini|
- Buah :
- Jeruk
- Apel
- Anggur
- Semangka
- Hewan :
- Kucing
- Sapi
- Kambing
- Anjing
- Domba
HTML Syntax
Javascript Syntax
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.
Incoming search terms:
- jelaskan cara cara menghilangkan element
- cara menghapus isi tag div jqueey
- ajax menghapus element html
- cara mempelajari element
- cara menghapus elemen html dengan jquery
- cara menghapus jquery pada website
- cara menghapus objek dengan jquery
- cara menghapus text pada texboxmenggunakan jquery
- cara menghapus value input dengan jquery
- cara menghilangkan div dengan javascript
- SHARE :
Diki Alfarabi Hadi
Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
- Author's profile
- All posts by Diki Alfarabi Hadi
Tags: cara menghapus element html dengan jquery, Menghapus Element Dengan JQuery, pengertian fungsi remove pada jquery, pengertian jquery, penjelasan function jquery, remove() jquery, remove() pada jquery, syntax jquery
Tutorial JQuery Dasar
- #1. Pengertian JQuery
- #2. Pengenalan JQuery
- #3. Event JQuery
- #4. Effect JQuery
- #5. Callback Function JQuery
- #6. Chaining Function JQuery
- #7. Get Value
- #8. Set Value
- #9. Menambah Element Dengan JQuery
- #10. Menghapus Element Dengan JQuery
- #11. Manipulasi Class
- #12. Menambah CSS Dengan JQuery
Tutorial JQuery Lanjutan
- #1. Modal Dialog
- #2. Form Validasi
- #3. Form Animasi
- #4. Show Hide Password
- #5. Tutorial JQuery Lanjutan Lainnya
Tutorial JQuery Ajax
- #1. Halaman Web Ajax
- #2. Input Data Ajax
- #3. Tutorial Ajax Lainnya
Produk
- Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
- Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
- Source Code Toko Sport PHP dan MySQLi Rp 200,000
- Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000
Tutorial Terbaru
- Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
- Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
- Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
- Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
- Membuat QR Code Dengan PHP August 3, 2022
Toko Kami
SOCIAL
Malas Ngoding
TUTORIAL MENARIK LAINNYA
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery – Halo teman-teman. sebelumnya saya ucapkan dulu terima kasih sudah kembali berkunjung di www.malasngoding.com. Sesuai dengan judul ... Diki Alfarabi HadiMembuat Halaman Web Ajax Tanpa Reload dengan JQuery
12 April 2017
Show Hide Form Password Dengan JQuery Show Hide Form Password Dengan JQuery – Mungkin teman-teman ada yang masih bingung dengan judul tutorial kali ini, yaitu Show ... Diki Alfarabi HadiShow Hide Form Password Dengan JQuery
25 March 2016
Membuat Animasi Form Dengan JQuery Membuat Animasi Form Dengan JQuery – Halo teman-teman malasngoding.com. terima kasih sebelumnya saya ucapkan ke pada teman-teman pembaca setia di ... Diki Alfarabi HadiMembuat Animasi Form Dengan JQuery
24 March 2016
Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin – halo teman-teman malasngoding.com yang mudah-mudahan gak malas ngoding ...