How to delete child elements in javascript-JS Tutorial-php.cn

Table of Contents

一个标题

红盒子

Home

Web Front-end

JS Tutorial

How to delete child elements in javascript

青灯夜游

Jul 20, 2021 pm 05:17 PM

javascript child element

In JavaScript, you can use the removeChild() method to delete a child element. This method can delete a node from the child node list of the specified element, that is, delete the specified child element; the syntax format is "parent element object. removeChild(child element)".

How to delete child elements in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

javascript deletes child elements

In javascript, you can use the removeChild() method to delete child elements. Let’s learn more about it through examples.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div{
                border: 2px dashed #006DAF;
                padding: 10px;
            }
            p{
                border: 2px dashed #006DAF;
                padding: 10px;
            }
        </style>
    </head>
 
    <body>
        <div>div元素
            <h2 id="一个标题">一个标题</h2>
            <p>一个段落</p>
        </div><br />
        <input id="btn" type="button" value="删除div中的子元素p">
    </body>
    <script>
        function deleteChild() {
            var div = document.querySelector("div");
            var p = document.querySelector("p");
 
            div.removeChild(p);
 
        }
        var btn = document.getElementById("btn").onclick = function() {
            deleteChild();
        }
    </script>
 
</html>

Copy after login

Rendering:

How to delete child elements in javascript

Description:

removeChild( ) method can delete a node from the list of child nodes. The usage is as follows:

1	`nodeObject.removeChild(node)`

Copy after login

The parameter node is the node to be deleted. If the deletion is successful, the deleted node is returned; if it fails, null is returned.

When using the removeChild() method to delete a node, all child nodes contained in the node will be deleted at the same time.

Example 1

In the example below, the first-level title in the red box will be deleted when the button is clicked.

<div id="red">
    <h1 id="红盒子">红盒子</h1>
</div>
<div id="blue">蓝盒子</div>
<button id="ok">移动</button>
<script>
    var ok = document.getElementById ("ok");  //获取按钮元素的引用
    ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
        var red = document.getElementById ("red");  //获取红色盒子的引用
        var h1 = document.getElementsByTagName("h1")[0];  //获取标题元素的引用
        red.removeChild(h1);  //移出红盒子包含的标题元素
    }
</script>

Copy after login

Example 2

If you want to delete the blue box, but cannot determine its parent element, you can use the parentNode attribute to quickly obtain the reference of the parent element, and use this reference to Implement the delete operation.

var ok = document.getElementById ("ok");  //获取按钮元素的引用
ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
    var blue= document.getElementById ("blue");  //获取蓝色盒子的引用
    var parent = blue.parentNode;  //获取蓝色盒子父元素的引用
    parent.removeChild(blue);  //移出蓝色盒子
}

Copy after login

If you want to insert the deleted node into another location in the document, you can use the removeChild() method, or you can use the appendChild() and insertBefore() methods to achieve this.

Example 3

Deleting nodes is as frequently used as creating and inserting nodes in DOM document operations. For this reason, the delete node operation function can be encapsulated.

//封装删除节点函数
//参数：e表示预删除的节点
//返回值：返回被删除的节点，如果不存在指定的节点，则返回undefined值
function remove (e) {
    if (e) {
        var _e = e.parentNode.removeChild(e);
        return _e;
    }
    return undefined;
}

Copy after login

Example 4

If you want to delete all child nodes under the specified node, the encapsulation method is as follows:

//封装删除所有子节点的方法
//参数：e表示预删除所有子节点的父节点
function empty (e) {
    while (e.firstChild) {
        e.removeChild (e.firstChild);
    }
}

Copy after login

[Recommended learning: javascript advanced tutorial】

The above is the detailed content of How to delete child elements in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7488

CakePHP Tutorial

1377

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

How to remove last child element in jQuery? Feb 19, 2024 pm 09:40 PM

jQuery is a popular JavaScript library used to simplify many tasks in web development, including DOM manipulation. In web development, it is often necessary to add, delete, modify and check DOM elements, and deleting the last sub-element is also a common requirement. This article will introduce several methods to delete the last child element using jQuery. Method 1: Use the last() method. jQuery provides the last() method, which can select the last element of the current query result. By combining this

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

Understand the event bubbling mechanism: Why does a click on a child element affect the event of the parent element? Jan 13, 2024 pm 02:55 PM

Understanding event bubbling: Why does a click on a child element trigger an event on the parent element? Event bubbling means that in a nested element structure, when a child element triggers an event, the event will be passed to the parent element layer by layer like bubbling, until the outermost parent element. This mechanism allows events on child elements to be propagated throughout the element tree and trigger all related elements in turn. To better understand event bubbling, let's look at a specific example code. HTML code: <divid="parent&q

JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

See all articles