Question

我创建了一个示例文件，该文件在母元素中添加和删除子元素。添加成功，但我在删除子元素时遇到问题。目标是每次单击“删除”按钮都会删除子元素。

 var adds = document.querySelector('#add');
    var remove = document.querySelector('#remove');
    var section = document.querySelector('section');
    var div;
    
    adds.onclick = function() {
    	div = document.createElement('div');
    	section.appendChild(div);
    	div.classList.add('style');
    };
    
    // THE PROBLEM
    remove.onclick = function() {
    	while(section.children.length !== 0) {
    		for(var c in section.children) {
    			section.removeChild(div[c]);
    		}
    	}
    };

  section {
        display: flex;
    	background: #0ff;
    	height: 100px;
    	padding: 8px;
    }
    section > div {margin: 0 1px;}
    .style {
    	width: 100px;
    	height: 100px;
    	background: lightgreen;
    }

<button id="add">Add</button>
    <button id="remove">Remove</button>
    
    <section class="container"></section>
<br>

我的代码出了什么问题？

Answer 1

我的代码出了什么问题？

这一行

section.removeChild(div[c]);

div可能在这里未定义，无论如何，部分的孩子不一定是div的孩子

所以将其改为

section.removeChild(section.children [c]);

此外，while不是必需的

remove.onclick = function() {
        for(var c in section.children) {
            section.removeChild(section.children[c]);
        }
};

修改

目标是每次单击“删除”按钮都会删除一个孩子元件。

remove.onclick = function() { if(section.children length ) { section.removeChild(section.children[0]); } };

使用for
更改if

使用removeChild（）删除容器中的子元素不起作用

1 个答案: