JavaScript 学习之路删除元素_红盒子蓝盒子 javascript-CSDN博客

本文链接：https://blog.csdn.net/qq_41886231/article/details/99979288

有这两个盒子，我想点击“移动”按钮删除蓝色的盒子。

首先蓝盒子在红盒子中，我想删除蓝盒子，就必须找到红盒子。

有两种代码可以参考（自己当笔记用的）

1.直接在单击函数中写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试网页</title>
    <style type="text/css">
        div {
            margin: 1em;
        }

        #red {
            border: solid 1px red;
        }

        #blue {
            border: solid 1px blue;
        }
    </style>
</head>

<body>
    <div id="red">
        <h1>红盒子</h1>
        <p>红红火火恍恍惚惚</p>
        <div id="blue">蓝盒子</div>
    </div>

    <button id="ok">移动</button>
    <!--    javascript存放位置-->
    <script type="text/javascript" src="测试2_JavaScript.js"></script>
    <script type="text/javascript">

        /*var p = document.createElem ent("p");
        var txt = document.createTextNode("盒模型");
        p.appendChild(txt);
        document.getElementById("box").appendChild(p);*/
        function remove(e) {
            if (e) {
                var _e = e.parentNode.rmoveChild(e);
                return _e;
            }
            return undefined;
        }
        var ok = document.getElementById("ok");
        ok.onclick = function () {
            var blue = document.getElementById("blue");
            var parent = blue.parentNode;
            parent.removeChild(blue);
        }

    </script>
</body>

</html>

2.写一个封装函数，直接调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试网页</title>
    <style type="text/css">
        div {
            margin: 1em;
        }

        #red {
            border: solid 1px red;
        }

        #blue {
            border: solid 1px blue;
        }
    </style>
</head>

<body>
    <div id="red">
        <h1>红盒子</h1>
        <p>红红火火恍恍惚惚</p>
        <div id="blue">蓝盒子</div>
    </div>

    <button id="ok">移动</button>
    <!--    javascript存放位置-->
    <script type="text/javascript" src="测试2_JavaScript.js"></script>
    <script type="text/javascript">

        /*var p = document.createElem ent("p");
        var txt = document.createTextNode("盒模型");
        p.appendChild(txt);
        document.getElementById("box").appendChild(p);*/
        function remove(e) {
            if (e) {
                var _e = e.parentNode.rmoveChild(e);
                return _e;
            }
            return undefined;
        }
        var ok = document.getElementById("ok");
        ok.onclick = function () {
            var blue = document.getElementById("blue");
            blue.remove(blue);
        }

    </script>
</body>

</html>