ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptでノードを削除する方法

JavaScriptでノードを削除する方法

青灯夜游
リリース: 2023-01-04 09:33:54
オリジナル
12414 人が閲覧しました

ノードを削除する Javascript メソッド: 1. Remove() メソッドを使用します。このメソッドは、すべてのテキスト ノードと子ノードを含む、親ノード上のすべての要素を削除するために使用できます。2. RemoveChild() メソッドを使用します。 、親ノード、の子ノードを削除するために使用できます。

JavaScriptでノードを削除する方法

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 5、Dell G3 コンピューター。

JavaScript では、removeChild() メソッドまたは Remove() メソッドを使用してノードを削除できます。

1. ノードを削除するには、removeChild() を使用します。

removeChild() メソッドは、指定された要素の指定された子ノードを削除します。削除されたノードを Node オブジェクトとして返します。ノードが存在しない場合は null を返します。

構文

1

node.removeChild(node)

ログイン後にコピー
  • ノード: 必須。削除するノード オブジェクト。

例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

 

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

<p id="demo">单击按钮移除列表的第一项</p>

<button onclick="myFunction()">点我</button>

<script>

function myFunction(){

    var list=document.getElementById("myList");

    list.removeChild(list.childNodes[0]);

}

</script>

 

</body>

</html>

ログイン後にコピー

レンダリング:

JavaScriptでノードを削除する方法

[推奨学習: js Basicチュートリアル]

2.remove() メソッドを使用してノードを削除します

remove() メソッドを使用して、親ノード上のすべての要素を削除できます、すべてのテキストと子ノードを含みます。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

   

<body>

    <ul style="border: 2px dashed #006DAF;">

        <li>Get Up in Morning</li>

        <li>Do some exercise</li>

        <li>Get Ready for school</li>

        <li>Study Daily</li>

        <li>Do homework</li>

    </ul>

    <input id="btn" type="button" value="删除子节点">

</body>

<script>

    function deleteChild() {

        var e = document.querySelector("ul");

        var first = e.firstElementChild;

        while (first) {

            first.remove();

            first = e.firstElementChild;

        }

    }

    var btn = document.getElementById("btn").onclick = function() {

        deleteChild();

    }

</script>

   

</html>

ログイン後にコピー

レンダリング:

JavaScriptでノードを削除する方法

プログラミング関連の知識の詳細については、プログラミング ビデオをご覧ください。 !

以上がJavaScriptでノードを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート