Komentar: Semua node dapat dihapus melalui JavaScript. Artikel ini terutama membahas fungsi Removechild. Anda dapat melihat contoh -contoh berikut
Misalkan ada sesuatu di div:<! Doctype html>
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = gbk">
<title> Demo IsCroll: Simple </iteme>
<type skrip = "Teks/JavaScript">
fungsi deletedata () {
}
</script>
<type style = "text/css" media = "all">
tubuh, ul, li {
Padding: 0;
Margin: 0;
Perbatasan: 0;
}
tubuh {
font-size: 12px;
-webkit-user-select: tidak ada;
-webkit-text-size-adjust: tidak ada;
Font-Family: Helvetica;
}
</tyle>
</head>
<body>
<div> <input type = "kirim" value = "delete li node" /> </div>
<div>
<ul>
<li> Pretty Row 1 </li>
<li> Pretty Row 2 </li>
<li> Pretty Row 3 </li>
<li> Pretty Row 4 </li>
<li> Pretty Row 5 </li>
<li> Pretty Row 6 </li>
<li> Pretty Row 7 </li>
<li> Pretty Row 8 </li>
<li> Pretty Row 9 </li>
<li> Pretty Row 10 </li>
<li> Pretty Row 40 </li>
</ul>
</div>
</body>
</html>
Sekarang Anda perlu membersihkannya melalui fitur JavaScript.
Meskipun dapat diimplementasikan secara langsung melalui satu kalimat kode:
document.geteLementById (konten) .innerHtml =
Namun, artikel ini terutama membahas fungsi Removechild.
Saya menerima begitu saja bahwa itu bisa dilakukan dengan bantuan kode berikut:
fungsi deletedata () {
var el = document.geteLementById ('thelist');
var linodes = document.geteLementsbyTagname ("li");
peringatan (linodes.length);
untuk (var i = 0; i <linodes.length; i ++) {
alert ("hapus"+i+"linodes [i] ="+linodes [i]);
el.removechild (linodes [i]);
// <- el.removechild (linodes [i]);
}
}
Tanpa diduga, setelah mengklik tombol, hanya 1, 3, 5 ... dibersihkan, sementara 2, 4, 6 ... tidak hilang.
Masalah muncul sejak awal:
Setelah menghapus simpul pertama, urutan node berikutnya telah berubah: simpul kedua asli bergerak maju dan menjadi simpul pertama yang baru; Node ketiga asli menjadi simpul kedua ...
Jadi, langkah selanjutnya adalah menghapus simpul kedua, tetapi simpul ketiga yang paling asli dihapus.
Pada akhirnya, tidak semua dihapus, hanya 1, 3, 5 yang dihapus, meninggalkan 2, 4, dan 6.
Tidak ada kesalahan dalam sintaks, tetapi hasil yang diinginkan tidak diperoleh. Ini adalah kesalahan dalam algoritma! Bagaimana cara memperbaikinya?
Jika Anda menghapusnya secara berurutan, maka hapus dalam urutan terbalik. Ubah pernyataan untuk:
fungsi deletedata () {
var el = document.geteLementById ('thelist');
var linodes = document.geteLementsbyTagname ("li");
peringatan (linodes.length);
untuk (var i = linodes.length-1; i> = 0; i-) {
alert ("hapus"+i+"linodes [i] ="+linodes [i]);
el.removechild (linodes [i]);
// <- el.removechild (linodes [i]);
}
}
Cobalah, itu berhasil! Anda juga dapat menggunakan metode berikut:
fungsi deletedata () {
var el = document.geteLementById ('thelist');
var linodes = document.geteLementsbyTagname ("li");
peringatan (linodes.length);
untuk (var i = 0; i <el.childnodes.length; i ++) {
var childnode = el.childnodes [0]; // Selalu hapus yang pertama, bukankah lebih mudah
el.removechild (childnode);
}
}
Kode penyelesaian terlihat seperti ini:
<! Doctype html>
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = gbk">
<title> Demo IsCroll: Simple </iteme>
<type skrip = "Teks/JavaScript">
function initdata () {
var el = document.geteLementById ('thelist');
var linodes = document.geteLementsbyTagname ("li");
peringatan (linodes.length);
untuk (var i = linodes.length-1; i> = 0; i-) {
alert ("hapus"+i+"linodes [i] ="+linodes [i]);
el.removechild (linodes [i]);
// <- el.removechild (linodes [i]);
}
}
</script>
<type style = "text/css" media = "all">
tubuh, ul, li {
Padding: 0;
Margin: 0;
Perbatasan: 0;
}
tubuh {
font-size: 12px;
-webkit-user-select: tidak ada;
-webkit-text-size-adjust: tidak ada;
Font-Family: Helvetica;
}
</tyle>
</head>
<body>
<div> <input type = "kirim" value = "delete li node" /> </div>
<div>
<ul>
<li> Pretty Row 1 </li>
<li> Pretty Row 2 </li>
<li> Pretty Row 3 </li>
<li> Pretty Row 4 </li>
<li> Pretty Row 5 </li>
<li> Pretty Row 6 </li>
<li> Pretty Row 7 </li>
<li> Pretty Row 8 </li>
<li> Pretty Row 9 </li>
<li> Pretty Row 10 </li>
<li> Pretty Row 40 </li>
</ul>
</div>
</body>
</html>