Remove <div> elements created by Javascript by using javascript

Question

My code atm looks like this:

<!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>

So what I want, is for the remove-button to remove the divs that im creating. Ive been googling around and have tried alot of different codes, cant seem to get it to work..

Community · Accepted Answer · 2017-05-23 11:49:39Z

In your specific situation, you have two basic choices:

Just set innerHTML on the element to "":
```
myFigures.innerHTML = "";
```
It's slower than some alternatives, but you're not doing this in a tight loop, and it's easy.

Use a loop with removeChild:

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

See this other SO answer for information comparing the two techniques.

Here's that first option in context:

<!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>

Stan Shaw · Accepted Answer · 2014-10-31 17:42:32Z

0

Like T.J. Crowder said,

myFigures.innerHTML = "";

would work. However, that assumes that myFigures is empty when your DOM is initially loaded. If that is NOT the case, you need to add a class to the div when you create it.
AddDiv function:

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!");
    }
}

To remove them:

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

edited Oct 31, 2014 at 17:42

answered Oct 31, 2014 at 17:20

Stan Shaw

3,0541 gold badge14 silver badges27 bronze badges

2 Comments

T.J. Crowder Over a year ago

I think if you were going to do this, you'd be much better off with a class and querySelectorAll. The you wouldn't need the AddedDivs array at all.

Stan Shaw Over a year ago

Wow - how did I miss that?

Collectives™ on Stack Overflow

Remove <div> elements created by Javascript by using javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related