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 I tried following this tutorial: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/ 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. — Daniel Tovesson, Jul 15 '13 at 09:40

Austin Brunkhorst · Accepted Answer · 2019-07-10T18:44:55.597

183

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

edited Jul 10 '19 at 18:44

answered Jul 15 '13 at 09:29

Austin Brunkhorst

20,704
6
47
61

I want to be able to add multiple rows. My question was a bit unclear so I edited it. – Daniel Tovesson Jul 15 '13 at 09:35
1

This supports multiple rows. – Austin Brunkhorst Jul 15 '13 at 09:38
1

Oh, that's right. Just made a error trying your code. It's working now. Cheers! – Daniel Tovesson Jul 15 '13 at 09:43
Although, it's not working when wrapping the inputs in a div like `
` – Daniel Tovesson Jul 15 '13 at 10:05
What does javascript look like? Note that you have to put a back slash at the end of each line when setting the `innerHTML` or else you'll get a syntax error. – Austin Brunkhorst Jul 15 '13 at 10:07
Posting a shorted code-snippet. `div.innerHTML = '
';` And just by removing the div it's working again. – Daniel Tovesson Jul 15 '13 at 10:19
3

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. – Austin Brunkhorst Jul 15 '13 at 10:29

score 23 · Answer 2 · answered Aug 01 '18 at 12:45

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>

score 6 · Answer 3 · answered Jan 29 '20 at 15:09

6

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()

answered Jan 29 '20 at 15:09

Catalin Matei

61
1
2

The answer by Hoffmann already covers this – aggregate1166877 Jun 11 '22 at 13:47

score 5 · Answer 4 · answered Apr 24 '21 at 20:57

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>

score 4 · Answer 5 · edited Feb 10 '16 at 19:08

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

score 2 · Answer 6 · edited Mar 06 '15 at 10:28

2

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

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

edited Mar 06 '15 at 10:28

Imran Qamer

2,253
3
29
52

answered Mar 06 '15 at 10:27

score 2 · Answer 7 · answered Oct 14 '20 at 03:14

2

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();

answered Oct 14 '20 at 03:14

Vương Hữu Thiện

1,460
14
21

score 1 · Answer 8 · answered Jul 15 '13 at 09:29

1

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 ');
  });
});

answered Jul 15 '13 at 09:29

dashme

73
5

6

He didn't mention jQuery. – Austin Brunkhorst Jul 15 '13 at 09:29

score 1 · Answer 9 · answered Jul 15 '13 at 09:33

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);

    }

score 0 · Answer 10 · answered Sep 15 '19 at 02:27

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

Please explain your code a bit for the questioner. :) – Lamanus Sep 15 '19 at 02:55 — Lamanus, Sep 15 '19 at 02:55
In this code we can easily ADD and REMOVE specific Textbox. – Aezaz Desai May 19 '20 at 11:28 — Aezaz Desai, May 19 '20 at 11:28

Add/remove HTML inside div using JavaScript

10 Answers10

Linked

Related