ความคิดเห็น: โหนดทั้งหมดสามารถลบได้ผ่าน JavaScript บทความนี้ส่วนใหญ่กล่าวถึงฟังก์ชั่น RemoveChild คุณสามารถดูตัวอย่างต่อไปนี้ได้
สมมติว่ามีบางอย่างใน div:<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> การสาธิต Iscroll: Simple </title>
<script type = "text/javascript">
ฟังก์ชั่น deletedata () {
-
</script>
<style type = "text/css" media = "all">
ร่างกาย, ul, li {
Padding: 0;
มาร์จิ้น: 0;
ชายแดน: 0;
-
ร่างกาย {
ขนาดตัวอักษร: 12px;
-webkit-user-select: ไม่มี;
-webkit-text-size-adjust: ไม่มี;
Font-Family: Helvetica;
-
</style>
</head>
<body>
<div> <อินพุต type = "subment" value = "ลบ Li Node" /> </div>
<div>
<ul>
<li> แถวสวย 1 </li>
<li> แถวสวย 2 </li>
<li> Pretty Row 3 </li>
<li> แถวสวย 4 </li>
<li> Pretty Row 5 </li>
<li> แถวสวย 6 </li>
<li> แถวสวย 7 </li>
<li> แถวสวย 8 </li>
<li> แถวสวย 9 </li>
<li> แถวสวย 10 </li>
<li> แถวสวย 40 </li>
</ul>
</div>
</body>
</html>
ตอนนี้คุณต้องล้างผ่านคุณสมบัติของ JavaScript
แม้ว่าจะสามารถนำไปใช้โดยตรงผ่านรหัสหนึ่งประโยค:
document.getElementById (เนื้อหา) .innerhtml =
อย่างไรก็ตามบทความนี้ส่วนใหญ่กล่าวถึงฟังก์ชั่น RemoveChild
ฉันรับมันเพื่อให้ได้ว่ามันสามารถทำได้ด้วยความช่วยเหลือของรหัสต่อไปนี้:
ฟังก์ชั่น deletedata () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsByTagname ("li");
การแจ้งเตือน (linodes.length);
สำหรับ (var i = 0; i <linodes.length; i ++) {
การแจ้งเตือน ("ลบ"+i+"linodes [i] ="+linodes [i]);
El.RemoveChild (linodes [i]);
// <- El.RemoveChild (linodes [i]);
-
-
โดยไม่คาดคิดหลังจากคลิกที่ปุ่มมีเพียง 1, 3, 5 ... ถูกล้างในขณะที่ 2, 4, 6 ... ไม่ได้หายไป
ปัญหาเกิดขึ้นตั้งแต่ต้น:
หลังจากลบโหนดแรกลำดับของโหนดที่ตามมามีการเปลี่ยนแปลง: โหนดที่สองดั้งเดิมกำลังก้าวไปข้างหน้าและกลายเป็นโหนดแรกใหม่; โหนดที่สามดั้งเดิมกลายเป็นโหนดที่สอง ...
ดังนั้นขั้นตอนต่อไปคือการลบโหนดที่สอง แต่โหนดที่สามดั้งเดิมถูกลบ
ในที่สุดก็ไม่ถูกลบทั้งหมดเพียง 1, 3, 5 ถูกลบออกทิ้งไว้ 2, 4 และ 6
ไม่มีข้อผิดพลาดในไวยากรณ์ แต่ไม่ได้ผลลัพธ์ที่ต้องการ นี่คือข้อผิดพลาดในอัลกอริทึม! จะแก้ไขได้อย่างไร?
หากคุณลบตามลำดับให้ลบตามลำดับย้อนกลับ แก้ไขคำสั่งสำหรับ:
ฟังก์ชั่น deletedata () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsByTagname ("li");
การแจ้งเตือน (linodes.length);
สำหรับ (var i = linodes.length-1; i> = 0; i-) {
การแจ้งเตือน ("ลบ"+i+"linodes [i] ="+linodes [i]);
El.RemoveChild (linodes [i]);
// <- El.RemoveChild (linodes [i]);
-
-
ลองใช้มันประสบความสำเร็จ! คุณยังสามารถใช้วิธีการต่อไปนี้:
ฟังก์ชั่น deletedata () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsByTagname ("li");
การแจ้งเตือน (linodes.length);
สำหรับ (var i = 0; i <el.childnodes.length; i ++) {
var childNode = el.childnodes [0]; // ลบอันแรกเสมอไม่ใช่เรื่องง่าย
El.RemoveChild (เด็ก);
-
-
รหัสเสร็จสมบูรณ์มีลักษณะเช่นนี้:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> การสาธิต Iscroll: Simple </title>
<script type = "text/javascript">
ฟังก์ชั่น initData () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsByTagname ("li");
การแจ้งเตือน (linodes.length);
สำหรับ (var i = linodes.length-1; i> = 0; i-) {
การแจ้งเตือน ("ลบ"+i+"linodes [i] ="+linodes [i]);
El.RemoveChild (linodes [i]);
// <- El.RemoveChild (linodes [i]);
-
-
</script>
<style type = "text/css" media = "all">
ร่างกาย, ul, li {
Padding: 0;
มาร์จิ้น: 0;
ชายแดน: 0;
-
ร่างกาย {
ขนาดตัวอักษร: 12px;
-webkit-user-select: ไม่มี;
-webkit-text-size-adjust: ไม่มี;
Font-Family: Helvetica;
-
</style>
</head>
<body>
<div> <อินพุต type = "subment" value = "ลบ Li Node" /> </div>
<div>
<ul>
<li> แถวสวย 1 </li>
<li> แถวสวย 2 </li>
<li> Pretty Row 3 </li>
<li> แถวสวย 4 </li>
<li> Pretty Row 5 </li>
<li> แถวสวย 6 </li>
<li> แถวสวย 7 </li>
<li> แถวสวย 8 </li>
<li> แถวสวย 9 </li>
<li> แถวสวย 10 </li>
<li> แถวสวย 40 </li>
</ul>
</div>
</body>
</html>