JavaScript Native ลบอินสแตนซ์รหัสองค์ประกอบเด็กที่ระบุ:
บทนี้แนะนำวิธีการใช้ JavaScript ดั้งเดิมเพื่อลบองค์ประกอบเด็กที่ระบุ
ทุกคนรู้ว่าการใช้ jQuery เพื่อใช้ฟังก์ชั่นนี้สะดวกกว่า แต่ก็ไม่ลำบากในการใช้ JavaScript ดั้งเดิม ให้ฉันแนะนำด้านล่าง
สำหรับวิธีที่ jQuery ใช้ฟังก์ชั่นนี้โปรดดูบทเกี่ยวกับการลบอินสแตนซ์รหัสองค์ประกอบเด็กที่ระบุ
ตัวอย่างรหัส:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<meta charset = "utf-8">
<title> wulin.com </title>
<style>
ul li {
ความกว้าง: 400px;
ความสูง: 30px;
ระดับความสูง: 30px;
รายการสไตล์: ไม่มี;
-
</style>
<script>
window.onload = function () {
var obt = document.getElementById ("bt");
var obox = document.getElementById ("Box");
var lis = obox.getElementsByTagname ("li");
obt.onclick = function () {
obox.removechild (lis [1]);
-
-
</script>
</head>
<body>
<ul id = "box">
<li> wulin.com ยินดีต้อนรับคุณโดยการทำงานหนักในวันพรุ่งนี้คุณจะมีสิ่งที่ดีกว่าได้ไหม </li>
<li> ไม่มีใครเป็นอาจารย์ตั้งแต่ต้นและต้องทำงานหนัก </li>
<li> ทุกวันเป็นเวลาใหม่ </li>
</ul>
<อินพุต type = "ปุ่ม" id = "bt" value = "ดูเอฟเฟกต์"/>
</body>
</html>
รหัสข้างต้นใช้ข้อกำหนดของเราและต่อไปนี้จะแนะนำกระบวนการดำเนินการ
รหัสความคิดเห็น:
1.window.onload = function () {} และเรียกใช้รหัสในฟังก์ชันหลังจากโหลดเนื้อหาเอกสารอย่างสมบูรณ์
2.VAR OBT = Document.getElementById ("BT") รับวัตถุองค์ประกอบปุ่ม
3.VAR OBOX = Document.getElementById ("Box") รับวัตถุองค์ประกอบด้วยกล่องค่าแอตทริบิวต์ ID
4.VAR LIS = OBOX.GETELEMENTSBYTAGNAME ("LI") รับชุดขององค์ประกอบ LI ภายใต้องค์ประกอบกล่อง
5.Obt.onclick = function () {}, ลงทะเบียนฟังก์ชันตัวจัดการเหตุการณ์คลิกสำหรับปุ่ม
6.Obox.removeChild (LIS [1]), ลบองค์ประกอบลูกที่ระบุขององค์ประกอบหลัก