Add/remove HTML inside div using JavaScript

Question

I want to be able to add multiple rows to a div and also removing them. I have a '+' button at the top of the page which is for adding content. Then to the right of every row there is a '-' button that's for removing that very row. I just can't figure out the javascript code in this example.

This is my basic HTML structure:

<input type="button" value="+" onclick="addRow()">
<div id="content">
</div>

This is what I want to add inside the content div:

<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label><input type="checkbox" name="check" value="1" />Checked?</label>
<input type="button" value="-" onclick="removeRow()">

• elclanrs: Can you post your JavaScript code so far?
• Daniel Tovesson: @elclanrs I tried following this tutorial: dustindiaz.com/… but didn't get the code to work with my example. I also looked into the updated answer he posted but I didn't really understand the code as I am fairly new to JavaScript.

Answer 1

You can do something like this.

function addRow() {
 const div = document.createElement('div');
 div.className = 'row';
 div.innerHTML = `
 <input type="text" name="name" value="" />
 <input type="text" name="value" value="" />
 <label> 
 <input type="checkbox" name="check" value="1" /> Checked? 
 </label>
 <input type="button" value="-" onclick="removeRow(this)" />
 `;
 document.getElementById('content').appendChild(div);
}
function removeRow(input) {
 document.getElementById('content').removeChild(input.parentNode);
}

• Daniel Tovesson: I want to be able to add multiple rows. My question was a bit unclear so I edited it.
• Austin Brunkhorst: This supports multiple rows.
• Daniel Tovesson: Oh, that's right. Just made a error trying your code. It's working now. Cheers!
• Daniel Tovesson: Although, it's not working when wrapping the inputs in a div like <div class="options_part"></div>
• Austin Brunkhorst: Oh got ya. You have to remove a child from the parent, so change input.parentNode to input.parentNode.parentNode in removeRow(). A reminder that if you add any more parents to the remove buttons you'll have to change removeRow accordingly like I just did.

Answer 2

To my most biggest surprise I present to you a DOM method I've never used before googeling this question and finding ancient insertAdjacentHTML on MDN (see CanIUse?insertAdjacentHTML for a pretty green compatibility table).

So using it you would write

function addRow () {
 document.querySelector('#content').insertAdjacentHTML(
 'afterbegin',
 `<div class="row">
 <input type="text" name="name" value="" />
 <input type="text" name="value" value="" />
 <label><input type="checkbox" name="check" value="1" />Checked?</label>
 <input type="button" value="-" onclick="removeRow(this)">
 </div>` 
 )
}
function removeRow (input) {
 input.parentNode.remove()
}

<input type="button" value="+" onclick="addRow()">
<div id="content">
</div>

Answer 3

Another solution is to use getDocumentById and insertAdjacentHTML.

Code:

function addRow() {
 const div = document.getElementById('content');
 div.insertAdjacentHTML('afterbegin', 'PUT_HTML_HERE');
}

Check here, for more details: Element.insertAdjacentHTML()

• aggregate1166877: The answer by Hoffmann already covers this

Answer 4

I know it took too long, it means you can write more briefly.

 function addRow() {
 var inputName, inputValue, label, checkBox, checked, inputDecrease, content, Ptag;
 // div
 content = document.getElementById('content');
 // P tag
 Ptag = document.createElement('p');
 // first input
 inputName = document.createElement('input');
 inputName.type = 'text';
 inputName.name = 'name';
 // Second input
 inputValue = document.createElement('input');
 inputValue.type = 'text';
 inputValue.name = 'Value';
 // Label
 label = document.createElement('label');
 // checkBox
 checkBox = document.createElement('input');
 checkBox.type = 'checkbox';
 checkBox.name = 'check';
 checkBox.value = '1';
 // Checked?
 checked = document.createTextNode('Checked?');
 // inputDecrease
 inputDecrease = document.createElement('input');
 inputDecrease.type = 'button';
 inputDecrease.value = '-';
 inputDecrease.setAttribute('onclick', 'removeRow(this)')
 // Put in each other
 label.appendChild(checkBox);
 label.appendChild(checked);
 Ptag.appendChild(inputName);
 Ptag.appendChild(inputValue);
 Ptag.appendChild(label);
 Ptag.appendChild(inputDecrease);
 content.appendChild(Ptag);
 }
 function removeRow(input) {
 input.parentNode.remove()
 }

* {
 margin: 3px 5px;
}

<input type="button" value="+" onclick="addRow()">
<div id="content">
</div>

Answer 5

You can use this function to add an child to a DOM element.

function addElement(parentId, elementTag, elementId, html) 
 {
// Adds an element to the document
 var p = document.getElementById(parentId);
 var newElement = document.createElement(elementTag);
 newElement.setAttribute('id', elementId);
 newElement.innerHTML = html;
 p.appendChild(newElement);
}
function removeElement(elementId) 
{
 // Removes an element from the document
 var element = document.getElementById(elementId);
 element.parentNode.removeChild(element);
}

Answer 6

To remove node you can try this solution it helped me.

var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);

Answer 7

Add HTML inside div using JavaScript

Syntax:

element.innerHTML += "additional HTML code"

or

element.innerHTML = element.innerHTML + "additional HTML code"

Remove HTML inside div using JavaScript

elementChild.remove();

Answer 8

make a class for that button lets say :

`<input type="button" value="+" class="b1" onclick="addRow()">`

your js should look like this :

$(document).ready(function(){
 $('.b1').click(function(){
 $('div').append('<input type="text"..etc ');
 });
});

• Austin Brunkhorst: He didn't mention jQuery.

Answer 9

please try following to generate

 function addRow()
 {
 var e1 = document.createElement("input");
 e1.type = "text";
 e1.name = "name1";
 var cont = document.getElementById("content")
 cont.appendChild(e1);
 }

Answer 10

<!DOCTYPE html>
<html>
<head>
 <title>Dynamical Add/Remove Text Box</title>
 <script language="javascript">
 localStorage.i = Number(1);
 function myevent(action)
 {
 var i = Number(localStorage.i);
 var div = document.createElement('div');
 if(action.id == "add")
 {
 localStorage.i = Number(localStorage.i) + Number(1);
 var id = i;
 div.id = id;
 div.innerHTML = 'TextBox_'+id+': <input type="text" name="tbox_'+id+'"/>' + ' <input type="button" id='+id+' onclick="myevent(this)" value="Delete" />';
 document.getElementById('AddDel').appendChild(div);
 }
 else
 {
 var element = document.getElementById(action.id);
 element.parentNode.removeChild(element);
 }
 }
 </script>
</head>
<body>
 <fieldset>
 <legend>Dynamical Add / Remove Text Box</legend>
 <form>
 <div id="AddDel">
 Default TextBox:
 <input type="text" name="default_tb">
 <input type="button" id="add" onclick="myevent(this)" value="Add" />
 </div>
 <input type="button" type="submit" value="Submit Data" />
 </form>
 </fieldset>
</body>
</html>

• Daeho Ro: Please explain your code a bit for the questioner. :)
• Aezaz Desai: In this code we can easily ADD and REMOVE specific Textbox.