JavaScript 删除节点

JavaScript删除节点的方法：父节点.removeChild(子节点)。

以下为案例：

例，删除所有的p节点：

<ul>
    <li>
        <p>1</p>
    </li>
    <li>
        <p>2</p>
    </li>
    <li>
        <p>3</p>
    </li>
    <li>
        <p>4</p>
    </li>
</ul>
<script>
    //method 1
    function remove1() {
        var allLi = document.getElementsByTagName("li");
        for(var i=0;i<allLi.length;i++){
            allLi[i].removeChild(allLi[i].getElementsByTagName("p")[0]);
        }
    }
    //method 2
    function remove2() {
        var allLi = document.getElementsByTagName("li");
        var allP = document.getElementsByTagName("p");
        for(var i=0;i<allLi.length;i++){
            allLi[i].removeChild(allP[0]);
        }
    }
    remove2();
</script>

例，删除li下，p节点中的br节点：

<ul>
    <li>
        <p><br>1</p>
    </li>
    <li>
        <p><br>2</p>
    </li>
    <li>
        <p><br>3</p>
    </li>
    <li>
        <p><br>4</p>
    </li>
</ul>
<script>
    function remove() {
        var allLi = document.getElementsByTagName("li");
        for(var i=0;i<allLi.length;i++){
            allLi[i].getElementsByTagName("p")[0].removeChild(allLi[i].getElementsByTagName("p")[0].getElementsByTagName("br")[0])
        }
    }
    remove();
</script>

例，删除li下，p节点中的br节点（br可能不存在）：

<ul>
    <li>
        <p><br>1</p>
    </li>
    <li>
        <p>2</p>
    </li>
    <li>
        <p><br>3</p>
    </li>
    <li>
        <p>4</p>
    </li>
</ul>
<script>
    function remove() {
        var allLi = document.getElementsByTagName("li");
        for(var i=0;i<allLi.length;i++){
            if(allLi[i].getElementsByTagName("p")[0].getElementsByTagName("br")[0]){
                allLi[i].getElementsByTagName("p")[0].removeChild(allLi[i].getElementsByTagName("p")[0].getElementsByTagName("br")[0]);
            }
        }
    }
    //不加判断会出错（判断节点是否存在）
    function remove2() {
        var allLi = document.getElementsByTagName("li");
        for(var i=0;i<allLi.length;i++){
            allLi[i].getElementsByTagName("p")[0].removeChild(allLi[i].getElementsByTagName("p")[0].getElementsByTagName("br")[0]);
        }
    }
    remove();
</script>

例，删除p中的所有span节点：

<p>111111<span>222222</span>111111<span>222222</span>111111<span>222222</span>111111<span>222222</span></p>
<script>
    //删除所有的span标签
    function remove() {
        var p = document.getElementsByTagName("p")[0];
        var allSpan = document.getElementsByTagName("span");
        var num = allSpan.length;
        for(var i=0;i<num;i++){
            p.removeChild(allSpan[0]);//方括号中为什么是0不是i，因为，第一个span删除之后，第二个span就成了第一个了。
        }
    }
    remove();
</script>

Demo，一键删除，所有span节点：

<p>111111<span>222222</span>111111<span>222222</span>111111<span>222222</span>111111<span>222222</span></p>
<button id="my-btn">delete span</button>
<script>
    function remove() {
        var p = document.getElementsByTagName("p")[0];
        var allSpan = document.getElementsByTagName("span");
        var num = allSpan.length;
        for(var i=0;i<num;i++){
            if(allSpan.length>0){
                p.removeChild(allSpan[0]);
            }
        }
    }
    document.getElementById("my-btn").addEventListener("click",function () {
        remove();
    });
</script>

Demo，删除方块：

<style>
    #my-box{
        width: 800px;
    }
    .my-inner-box{
        width: 200px;
        height: 200px;
        margin-right: 20px;
        position: relative;
        float: left;
        border-radius: 5px;
        background: tomato;
        margin-bottom: 20px;
        box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        color: #fff;
        font-size: 30px;
        line-height: 200px;
        text-align: center;
    }
    .to-delete{
        background: slateblue;
    }
</style>
<div id="my-box">
    <div class="my-inner-box">1</div>
    <div class="my-inner-box to-delete">2</div>
    <div class="my-inner-box">3</div>
    <div class="my-inner-box to-delete">4</div>
    <div class="my-inner-box">5</div>
    <div class="my-inner-box to-delete">6</div>
</div>
<button id="my-btn01">DELETE ONE BY ONE</button>
<button id="my-btn02">DELETE ALL</button>
<script>
    var toDelete = document.getElementsByClassName("to-delete");
    var myBox = document.getElementById("my-box");
    var myBtn1 = document.getElementById("my-btn01");
    var myBtn2 = document.getElementById("my-btn02");
    var num = toDelete.length;
    //一个接一个的删除
    myBtn1.addEventListener("click",function () {
        if(toDelete.length>0){
            myBox.removeChild(toDelete[0]);
        }
    });
    //全部删除
    myBtn2.addEventListener("click",function () {
        for(var i=0;i<num;i++){
            if(toDelete.length>0){
                myBox.removeChild(toDelete[0]);
            }
        }
    })
</script>

Demo,点击哪个方块，删除哪个方块：

<style>
    #my-box{
        width: 800px;
    }
    .my-inner-box{
        width: 200px;
        height: 200px;
        margin-right: 20px;
        position: relative;
        float: left;
        border-radius: 5px;
        background: tomato;
        margin-bottom: 20px;
        box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        color: #fff;
        font-size: 30px;
        line-height: 200px;
        text-align: center;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;: ;
    }
    .color2{
        background: slateblue;
    }
</style>
<div id="my-box">
    <div class="my-inner-box">1</div>
    <div class="my-inner-box color2">2</div>
    <div class="my-inner-box">3</div>
    <div class="my-inner-box color2">4</div>
    <div class="my-inner-box">5</div>
    <div class="my-inner-box color2">6</div>
</div>
<script>
    var item = document.getElementsByClassName("my-inner-box");
    var myBox = document.getElementById("my-box");
    for(var i=0;i<item.length;i++){
        item[i].addEventListener("click",function () {
            myBox.removeChild(this);
        })
    }
</script>

例，删除所有的a标签：

<p>111<a href="">222</a>111<a href="">222</a></p>
<p>111<a href="">222</a>111<a href="">222</a></p>
<p>111<a href="">222</a>111<a href="">222</a></p>
<p>111<a href="">222</a>111<a href="">222</a></p>
<button id="my-btn">delete A</button>
<script>
    //删除所有的a
    function  deleteAllA(){
        var allP = document.getElementsByTagName("p");
        for(var i=0;i<allP.length;i++){
            var everyP = allP[i];
            var allPA = everyP.getElementsByTagName("a");
            var num = allPA.length;
            if(num>0){
                for(var j=0;j<num;j++){
                    everyP.removeChild(allPA[0]);
                }
            }
        }
    }

    document.getElementById("my-btn").addEventListener("click",function () {
        deleteAllA();
    })
</script>

Demo：按空格删除下落的方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo 删除方块</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-y: hidden;
        }
        .my-box{
            width: 100px;
            height: 100px;
            background: seagreen;
            margin: 10px;
            position: relative;
            float: left;
            -webkit-transition: all;
            transition: all;
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
        }
        .result{
            position: absolute;
            font-size: 16px;
            top: 50px;
            left: 150px;
        }
        .info{
            position: absolute;
            font-size: 16px;
            top: 80px;
            left: 150px;
        }
    </style>
</head>
<body>
<div class="my-box">0</div>
<p class="result">结果为：</p>
<p class="info">按空格，消除方块</p>
<script>
    var index = 1;
    var t = 3000;
    var myInt1 = null;
    var myInt2 = null;
    var winH = document.body.clientHeight;

    console.log(winH-100);

    var record=0;
    var recordTime=null;
    function recordTimeFn() {
        record=0;
        recordTime = setInterval(function () {
            record++;
        },10);
    }

    function remove() {
        myInt1 = setInterval(function () {
            if(document.getElementsByClassName("my-box")[0]){
                document.body.removeChild(document.getElementsByClassName("my-box")[0]);
                console.log(record);
                clearInterval(recordTime);
            }
            //console.log(t);
            if(t>500){
                t--;
            }
            clearInterval(myInt1);
            remove();
        },t);
    }
    remove();
    function addBox() {
        myInt2 = setInterval(function () {
            var box = document.createElement("div");
            box.className = "my-box";
            document.body.appendChild(box);
            box.innerText = index++;
            setTimeout(function () {
                box.style = "-webkit-transition-duration: "+((t-20)/1000)+"s;transition-duration: "+((t-20)/1000)+"s;transform:translate(0px,"+winH+"px);-webkit-transform:translate(0px,"+winH+"px);"
            },20);
            clearInterval(myInt2);
            addBox();
            recordTimeFn();
        },t);
    }
    addBox();
    document.onkeydown = function (event) {
        var e = event||window.event;
        if(e.keyCode===32){
            if(document.getElementsByClassName("my-box")[0]){
                document.body.removeChild(document.getElementsByClassName("my-box")[0]);
                document.getElementsByClassName("result")[0].innerText = "结果为：行走了"+(((record*10)/(t*((winH-100)/winH))).toFixed(3)*100)+"%";
                clearInterval(recordTime);
            }
        }
    };
</script>
</body>
</html>

文字滚动
就是添加节点，删除节点的操作！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            width: 200px;
            height: 128px;
            background: paleturquoise;
            overflow-y: hidden;
        }
        li{
            width: 100%;
            height: 32px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            line-height: 32px;
            text-align: left;
            padding: 0 10px;
            border-bottom: 1px solid silver;
        }
    </style>
</head>
<body>
<ul>
    <li>This is item-1!</li>
    <li>This is item-2!</li>
    <li>This is item-3!</li>
    <li>This is item-4!</li>
</ul>
<button id="stop">STOP</button>
<button id="start">START</button>
<script>
    var index = 5;
    var myInt = null;
    var ul = document.getElementsByTagName("ul")[0];
    function setInt() {
        myInt = setInterval(function () {
            var newLi = document.createElement("li");
            newLi.innerText = "This is item-"+(index++)+"!"
            ul.appendChild(newLi);
            ul.removeChild(document.getElementsByTagName("li")[0]);
        },1000);
    }
    setInt();
    document.getElementById("stop").addEventListener("click",function () {
        clearInterval(myInt);
    });
    document.getElementById("start").addEventListener("click",function () {
        setInt();
    })
</script>
</body>
</html>

文字滚动（带过度特效）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            width: 200px;
            background: paleturquoise;
        }
        li{
            width: 100%;
            height: 32px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            line-height: 32px;
            text-align: left;
            padding: 0 10px;
            border-bottom: 1px solid silver;
        }
        .list-container{
            width: 200px;
            height: 128px;
            overflow-y: hidden;
        }
    </style>
</head>
<body>
<div class="list-container">
    <ul>
        <li>This is item-1!</li>
        <li>This is item-2!</li>
        <li>This is item-3!</li>
        <li>This is item-4!</li>
    </ul>
</div>
<button id="stop">STOP</button>
<button id="start">START</button>
<script>
    var index = 5;
    var myInt = null;
    var ul = document.getElementsByTagName("ul")[0];
    function setInt() {
        myInt = setInterval(function () {
            var newLi = document.createElement("li");
            newLi.innerText = "This is item-"+(index++)+"!";
            ul.appendChild(newLi);
            ul.style = addStyle();
            setTimeout(function () {
                ul.style = "";
                ul.removeChild(document.getElementsByTagName("li")[0]);
            },200);

        },1000);
    }
    setInt();
    document.getElementById("stop").addEventListener("click",function () {
        clearInterval(myInt);
    });
    document.getElementById("start").addEventListener("click",function () {
        setInt();
    });
    function addStyle() {
        var myStyle = "-webkit-transition: all;transition: all;-webkit-transition-timing-function: linear;transition-timing-function: linear;-webkit-transition-duration: .2s;transition-duration: .2s;";
        myStyle+="transform:translate(0px,-32px);-webkit-transform:translate(0px,-32px);";
        console.log(myStyle);
        return myStyle;
    }
</script>
</body>
</html>