التعليق: يمكن حذف جميع العقد من خلال JavaScript. يناقش هذا المقال بشكل رئيسي وظيفة removeChild. يمكنك إلقاء نظرة على الأمثلة التالية
افترض أن هناك شيئًا ما في Div:<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = gbk">
<title> Demo Iscroll: Simple </title>
<script type = "text/javaScript">
وظيفة deletedata () {
}
</script>
<type type = "text/css" media = "all">
الجسم ، ul ، li {
الحشو: 0 ؛
الهامش: 0 ؛
الحدود: 0 ؛
}
جسم {
حجم الخط: 12 بكسل ؛
-webkit-user-select: لا شيء ؛
-webkit-text-size-adjust: لا شيء ؛
Font-Family: Helvetica ؛
}
</style>
</head>
<body>
<div> <input type = "submit" value = "delete li node" /> </viv>
<viv>
<ul>
<li> صف جميل 1 </li>
<li> صف جميل 2 </li>
<li> صف جميل 3 </li>
<li> صف جميل 4 </li>
<li> صف جميل 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 (content) .innerhtml =
ومع ذلك ، فإن هذا المقال يناقش بشكل أساسي وظيفة removechild.
أخذت الأمر أمرا مفروغا منه أنه يمكن القيام به بمساعدة الكود التالي:
وظيفة deletedata () {
var el = document.getElementById ('thelist') ؛
var linodes = document.getElementsByTagName ("li") ؛
تنبيه (linodes.length) ؛
لـ (var i = 0 ؛ i <linodes.length ؛ i ++) {
ALERT ("delete"+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-) {
ALERT ("delete"+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 (childnode) ؛
}
}
يبدو رمز الانتهاء هكذا:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = gbk">
<title> Demo 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-) {
ALERT ("delete"+i+"linodes [i] ="+linodes [i]) ؛
el.removechild (linodes [i]) ؛
// <- el.removechild (linodes [i]) ؛
}
}
</script>
<type type = "text/css" media = "all">
الجسم ، ul ، li {
الحشو: 0 ؛
الهامش: 0 ؛
الحدود: 0 ؛
}
جسم {
حجم الخط: 12 بكسل ؛
-webkit-user-select: لا شيء ؛
-webkit-text-size-adjust: لا شيء ؛
Font-Family: Helvetica ؛
}
</style>
</head>
<body>
<div> <input type = "submit" value = "delete li node" /> </viv>
<viv>
<ul>
<li> صف جميل 1 </li>
<li> صف جميل 2 </li>
<li> صف جميل 3 </li>
<li> صف جميل 4 </li>
<li> صف جميل 5 </li>
<li> صف جميل 6 </li>
<li> صف جميل 7 </li>
<li> صف جميل 8 </li>
<li> صف جميل 9 </li>
<li> صف جميل 10 </li>
<li> صف جميل 40 </li>
</ul>
</div>
</body>
</html>