51..dom删除元素/标签

<head>
    <meta charset="UTF-8">
    <title>9.dom删除元素/标签</title>
</head>
<body>
        <div id="no1">
            <div>basic</div>
            <!--<input type="button" value="basic">-->
        </div>
        <hr>
        <div id="btn">
            <input type="button" value="增加标签">
            <input type="button" value="删除所有文本框">
            <input type="button" value="删除vlaue含有2的文本框">
            <input type="button" value="删除所有文本框">
        </div>
</body>
        <script>
            //3删除vlaue含有2的文本框
            var ffChild = document.getElementById("no1");//父元素对象
            document.getElementById("btn").getElementsByTagName("input")[2].onclick=function () {
                var ccChild = document.getElementById("no1").getElementsByTagName("input");

                    for (var i = 0; i < ccChild.length;) {
                        if(ccChild[i].value.indexOf("2")!=-1){
                            ffChild.removeChild(ccChild[i]);
                        }else{
                            i++;
                        }
                    }


            }

            //2删除所有文本框
            var fChild = document.getElementById("no1");//父元素对象
           // var cChild = document.getElementById("no1").getElementsByTagName("input");//子元素数组
            document.getElementById("btn").getElementsByTagName("input")[1].onclick=function () {
                var cChild = document.getElementById("no1").getElementsByTagName("input");//子元素数组
                for (var i = 0; i <cChild.length ;) {
                    //var cChild = document.getElementById("no1").getElementsByTagName("input");
                    //if(i==0) fChild.removeChild(cChild[i]);
                    fChild.removeChild(cChild[i]);
                    //fChild.removeChild(cChild[i+1]);
                }
            }

            //1添加元素
            var count = 20;
            document.getElementById("btn").getElementsByTagName("input")[0].onclick=function () {
                //拿到父元素
                var fatherChar = document.getElementById("no1");
                for (var i = 0; i <20 ; i++) {
                    var newChar = document.createElement("input");
                    fatherChar.appendChild(newChar);
                    newChar.value=i+1;
                    if(i>9){
                        newChar.style.color="blue";
                    }else{
                        newChar.style.color="red";
                    }

                }
            }

        </script>
posted on 2022-04-13 17:12 小小程序猿level1 阅读(149) 评论(0) 收藏举报