Adding and removing forms in Javascript

Question

I currently have the following code which adds a new input box everytime the user clicks a button. Is there a way to create a button to remove the last generated input box?

var data = '<label>Temperature (K):</label><input type="number" name="temp"/>'


function addNew() {
  var newContent = document.createElement('div');
  newContent.innerHTML = data;
  document.getElementById('target').appendChild(newContent);
}

<div id="target"></div>

<input id="add" type="button" value="Add New" onclick="addNew()" />

I'd wrap the input and label in a div with a class, then find the last instance of that class and remove it. — DBS
– DBS, Commented Aug 30, 2016 at 8:00

Jonas Wilms · Accepted Answer · 2016-08-30 08:49:21Z

1

Push your inputs into an array:

inputs=[];

inputs.push(newContent);
//put this in your addNew function

Now you can get the last element out of that array and remove it

function remove(){
if(inputs.length>0){
elem=inputs.pop();
elem.parentNode.removeChild(elem);
}
}

edited Aug 30, 2016 at 8:49

answered Aug 30, 2016 at 8:03

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dievardump Over a year ago

This will throw an error if the inputs length is 0.

bnsd55 · Accepted Answer · 2016-08-30 08:11:49Z

0

Add:

<input id="remove" type="button" value="Remove last element" onclick="removeLastElem()" />

And:

function removeLastElem() {
    document.getElementById('target').lastChild.remove()
}

EXAMPLE :)

answered Aug 30, 2016 at 8:11

bnsd55

3182 silver badges10 bronze badges

Comments

Anant Dabhi · Accepted Answer · 2016-08-30 08:07:23Z

0

Here is sample of your java-script to remove added div

First you need to create button to remove newly added row and onclick you need to remove its parent element(last added div).

 var data='<label>Temperature (K):</label><input type="number" name="temp"/> <input type="button" value="Remove" onclick="removeDiv(this)"  />';


function addNew() {
   var newContent = document.createElement('div');
  newContent.innerHTML = data;
  document.getElementById('target').appendChild(newContent);
  }

function removeDiv(args){
args.parentNode.remove()
}

Sample JSBIN

answered Aug 30, 2016 at 8:07

Anant Dabhi

11.2k3 gold badges33 silver badges51 bronze badges

Comments

noitse · Accepted Answer · 2016-08-30 08:11:10Z

0

Simple select last child and remove it

function removeLast(){
 document.getElementById("target").lastChild.remove(); 
}

Here is jsfiddle

https://jsfiddle.net/aqev0pu4/

answered Aug 30, 2016 at 8:11

noitse

1,0259 silver badges28 bronze badges

Comments

Frank Bessou · Accepted Answer · 2016-08-30 08:13:36Z

0

Put all the content you add to the form in a wrapping node:

var data = '<span><label>Temperature (K):</label><input type="number" name="temp"/></span>'

You can remove the last child of your "target" node:

function removeLast() {
    document.getElementById("target").lastChild.remove();
}

edited Aug 30, 2016 at 8:13

answered Aug 30, 2016 at 8:04

Frank Bessou

6525 silver badges8 bronze badges

2 Comments

Frank Bessou Over a year ago

Can't you wrap it in a container node like: var data = '<span><label>Temperature (K):</label><input type="number" name="temp"/></span>'.

Jonas Wilms Over a year ago

Yes shure, but you may need to describe it in your answer

dievardump · Accepted Answer · 2016-08-30 08:16:02Z

Just keep a list of added elements :

var data = '<label>Temperature (K):</label><input type="number" name="temp"/>'

var addedList = []; 
function addNew() {
  var newContent = document.createElement('div');
  newContent.innerHTML = data;
  addedList.push(document.getElementById('target').appendChild(newContent));
}
function removeLast() {
    if (addedList.length) {
        document.getElementById('target').removeChild(addedList.pop());
    }
}

<div id="target"></div>

<input id="add" type="button" value="Add New" onclick="addNew()" />
<input id="remove" type="button" value="Remove last added" onclick="removeLast()" />

If you just want the last element and not a list :

var data = '<label>Temperature (K):</label><input type="number" name="temp"/>'

var addedEl = null; 
function addNew() {
  var newContent = document.createElement('div');
  newContent.innerHTML = data;
  addedEl = document.getElementById('target').appendChild(newContent);
}
function removeLast() {
    if (null !== addedEl) {
        document.getElementById('target').removeChild(addedEl);
        addedEl = null;
    }
}

<div id="target"></div>

<input id="add" type="button" value="Add New" onclick="addNew()" />
<input id="remove" type="button" value="Remove last added" onclick="removeLast()" />

Shivam Mathur · Accepted Answer · 2016-08-30 08:42:12Z

Keep track of last inserted input tag with a counter as sub-string of its id and remove the last one by reading the id using counter.

var inputCounter = 1;

function addNew() {
	var data = '<label>Temperature (K):</label><input type="number" id="counter' + inputCounter + '" name="temp"/>';
	inputCounter++;

	var newContent = document.createElement('div');
	newContent.innerHTML = data;
	document.getElementById('target').appendChild(newContent);
}

function removeLast() {
	if (inputCounter > 1) {
		inputCounter--;
		var last = document.getElementById("counter" + inputCounter).parentElement;
		document.getElementById('target').removeChild(last);
	} else {
		alert("Add new inputs. No last inserted input found.")
	}
}

<div id="target"></div>

<input id="add" type="button" value="Add New" onclick="addNew()" />
<input id="remove" type="button" value="Remove last added" onclick="removeLast()" />

Collectives™ on Stack Overflow

Adding and removing forms in Javascript

7 Answers 7

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related