Question

我的代码atm看起来像这样：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oppgave 2</title>

<style type="text/css">
div{
	width: 100px;	
	height: 100px;
	background-color: rgb(100, 100, 100);
	margin: 5px;
	float: left;
}

</style>

</head>

<body>

<label>
	<ul>
		<li>Antall <input id="numberFigInput" type="text"></li>
	</ul>
</label>

<input id="genFigBtn" type="button" value="Generate">
<input id="removeFigBtn" type="button" value="Remove All">

<section id="myFigures"></section>

<script>

var numberFig, genFigBtn, myFigures;

function init(){
	numberFigInput = document.getElementById("numberFigInput");
	myFigures = document.getElementById("myFigures");

	genFigBtn = document.getElementById("genFigBtn");
	removeFigBtn = document.getElementById("removeFigBtn");

	genFigBtn.onclick = genFigures;
	removeFigBtn.onclick = removeFigures;
}

function genFigures(){
	var numberFig = numberFigInput.value;

	if (numberFig > 0, numberFig < 1001){
		for(var amount = 0; amount < numberFig; amount++){
			myFigures.innerHTML += "<div></div>"
		}
	}else{
		alert("You have to input an integer over 0, but not over 1000!");
	}
}
function removeFigures(){
	
}
init();
</script>


</body>
</html>

所以我想要的是删除按钮删除我创建的div。我一直在谷歌搜索并尝试了很多不同的代码，似乎无法让它工作..

Answer 1

在您的具体情况下，您有两个基本选择：

只需将元素innerHTML设置为""：
```
myFigures.innerHTML = "";
```
它比某些替代方案慢，但你不是在紧密循环中这样做，而且很容易。

使用removeChild的循环：

while (myFigures.firstChild) {
    myFigures.removeChild(myFigures.firstChild);
}

有关比较这两种技术的信息，请参阅this other SO answer。

这是上下文中的第一个选项：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oppgave 2</title>

<style type="text/css">
div{
	width: 100px;	
	height: 100px;
	background-color: rgb(100, 100, 100);
	margin: 5px;
	float: left;
}

</style>

</head>

<body>

<label>
	<ul>
		<li>Antall <input id="numberFigInput" type="text"></li>
	</ul>
</label>

<input id="genFigBtn" type="button" value="Generate">
<input id="removeFigBtn" type="button" value="Remove All">

<section id="myFigures"></section>

<script>

var numberFig, genFigBtn, myFigures;

function init(){
	numberFigInput = document.getElementById("numberFigInput");
	myFigures = document.getElementById("myFigures");

	genFigBtn = document.getElementById("genFigBtn");
	removeFigBtn = document.getElementById("removeFigBtn");

	genFigBtn.onclick = genFigures;
	removeFigBtn.onclick = removeFigures;
}

function genFigures(){
	var numberFig = numberFigInput.value;

	if (numberFig > 0, numberFig < 1001){
		for(var amount = 0; amount < numberFig; amount++){
			myFigures.innerHTML += "<div></div>"
		}
	}else{
		alert("You have to input an integer over 0, but not over 1000!");
	}
}
function removeFigures(){
    myFigures.innerHTML = "";
}
init();
</script>


</body>
</html>

Answer 2

像T.J.克劳德说，

myFigures.innerHTML = "";

会奏效。但是，假设在最初加载DOM时myFigures为空。如果不是这种情况，则需要在创建div时向div添加一个类 AddDiv功能：

function genFigures(){
    var numberFig = numberFigInput.value;

    if (numberFig > 0, numberFig < 1001){
        for(var amount = 0; amount < numberFig; amount++){
            myFigures.innerHTML += "<div class='AddedDiv'></div>"
        }
    }else{
        alert("You have to input an integer over 0, but not over 1000!");
    }
}

删除它们：

$(".AddedDiv").each(function(){
    $(this).parentNode.removeChild($(this));
});

使用javascript </div>删除由Javascript创建的<div>元素

2 个答案: