phpstudy集成环境

 首页 > 原生js删除父元素下面的子元素 怎么写

原生js删除父元素下面的子元素 怎么写

<body>
        <div class="parent">
            <li class="good">笨小孩</li>
            <li class="bad">壞小孩</li>
            <li class="good">乖小孩</li>
        </div>
        <button onclick="removeC()">delete</button>
        <script>
        var lis = document.getElementsByTagName('li');
        function removeC() {
            lis[0].parentNode.removeChild(lis[0]);
        }
        </script>
    </body>
<div class="parent">
    <li class="good">乖小孩</li>
    <li class="bad">壞小孩</li>
    <li class="good">乖小孩</li>
</div>

var parent = document.querySelector('.parent')
parent.removeChild(parent.querySelector('.bad')) // 只刪除壞小孩 .bad

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<input type="button" id="btn" value="删除">
<div id="list">
   <div id="item">1111</div>
</div>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    $('btn').onclick = function() {
        if($('list').children[0]) {
            $('list').removeChild($('item'));
        }
    }
</script>
</body>
</html>

是你这么写的啊

<body>
    <div class="parent">
        <li class="good">乖小孩</li>
        <li class="bad">壞小孩</li>
        <li class="good">乖小孩</li> 
        <li class="good">乖小孩</li>
    </div>
</body>
<script>
    var parent = document.querySelector('.parent');
    var sp = parent.getElementsByTagName('li');
    for(var i=0;i<sp.length;i++){
        parent.removeChild(parent.querySelector('.bad'));
    }
    /*加个for循环可以随着你的li 的添加，也可以全部删除'坏小孩';*/
</script>
【热门文章】
【热门文章】