Menghapus dan Mengganti Simpul
Hapus dan ganti elemen dengan aman.
Menghapus dan Mengganti Simpul adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.
Mengeluarkan Simpul
Selain menambahkan elemen, Anda sering perlu menghapus atau menukarnya. Metode DOM modern membuatnya ringkas dan mudah dibaca.
remove
remove melepaskan elemen langsung dari DOM tanpa memerlukan referensi induk.
const alert = document.querySelector(".alert");
alert.remove();removeChild
removeChild yang lebih lama dipanggil pada induknya dan mengembalikan simpul yang dihapus, sehingga Anda dapat menggunakannya kembali.
const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);Menghapus Banyak Simpul
Untuk menghapus semua anak, lakukan perulangan hingga kosong atau atur innerHTML menjadi teks kosong (cepat, tetapi membuang referensi).
while (list.firstChild) {
list.removeChild(list.firstChild);
}replaceWith
replaceWith menukar sebuah elemen dengan satu atau beberapa simpul atau teks baru dalam satu pemanggilan.
const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);replaceWith dengan Banyak Simpul
replaceWith menerima beberapa argumen, sehingga Anda dapat mengganti satu simpul dengan banyak simpul.
old.replaceWith(headerEl, bodyEl);replaceChild
replaceChild(newNode, oldNode) klasik dipanggil pada induknya. Perhatikan urutan argumennya: yang baru terlebih dahulu, lalu yang lama.
list.replaceChild(newItem, oldItem);Simpul yang Terlepas Tetap Ada
Simpul yang dihapus tidak dimusnahkan. Jika Anda menyimpan referensinya, Anda dapat menyisipkannya kembali nanti, yang berguna untuk pola tampilkan/sembunyikan.
const saved = panel;
panel.remove();
// later:
container.append(saved);replaceChildren
replaceChildren mengganti semua anak suatu elemen sekaligus, atau menghapus semuanya jika dipanggil tanpa argumen.
list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren(); // remove everythingMemori dan Pendengar
Menghapus elemen juga menghentikan pendengar peristiwanya agar tidak berjalan selama elemen terlepas. Jika elemen tersebut ditambahkan kembali, pendengar yang terpasang pada elemen itu sendiri tetap ada.
btn.addEventListener("click", handler);
btn.remove(); // handler will not fire while detached
container.append(btn); // handler works againMemilih Metode
Utamakan remove dan replaceWith untuk kode modern yang rapi. Gunakan removeChild/replaceChild jika Anda memerlukan simpul yang dikembalikan atau harus mendukung lingkungan yang sangat lama.
Pemeriksaan Cepat
Periksa urutan argumen.
Ringkasan
Hapus simpul dengan remove modern atau removeChild berbasis induk. Tukar simpul dengan replaceWith (modern, mendukung banyak argumen) atau replaceChild(newNode, oldNode). Gunakan replaceChildren untuk mengatur ulang semua anak. Simpul yang terlepas tetap berada di memori dan dapat disisipkan kembali nanti.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menghapus dan Mengganti Simpul” gratis?
Ya — teks lengkap “Menghapus dan Mengganti Simpul” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menghapus dan Mengganti Simpul”?
Hapus dan ganti elemen dengan aman. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai JavaScript Academy?
Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Menghapus dan Mengganti Simpul” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?
Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mengubah Teks dan Konten HTML
- Membuat dan Menyisipkan Elemen
- Memodifikasi Atribut dan Kelas
- Menghapus dan Mengganti Simpul