By Daniel Tovesson

2013-07-15 09:23:43 8 Comments

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


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


@Catalin Matei 2020-01-29 15:09:25

Another solution is to use getDocumentById and insertAdjacentHTML.


function addRow() {

 const  div = document.getElementById('content');

 div.insertAdjacentHTML('afterbegin', 'PUT_HTML_HERE');


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

@Aezaz Desai 2019-09-15 02:27:50

<!DOCTYPE html>
    <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( == "add")
                localStorage.i = Number(localStorage.i) + Number(1);
                var id = i;
       = id;
                div.innerHTML = 'TextBox_'+id+': <input type="text" name="tbox_'+id+'"/>' + ' <input type="button" id='+id+' onclick="myevent(this)" value="Delete" />';

                var element = document.getElementById(;
    <legend>Dynamical Add / Remove Text Box</legend>
        <div id="AddDel">
            Default TextBox:
            <input type="text" name="default_tb">
            <input type="button" id="add" onclick="myevent(this)" value="Add" />
            <input type="button" type="submit" value="Submit Data" />

@Lamanus 2019-09-15 02:55:17

Please explain your code a bit for the questioner. :)

@Aezaz Desai 2020-05-19 11:28:33

In this code we can easily ADD and REMOVE specific Textbox.

@Austin Brunkhorst 2013-07-15 09:29:11

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="" />
      <input type="checkbox" name="check" value="1" /> Checked? 
    <input type="button" value="-" onclick="removeRow(this)" />


function removeRow(input) {

@Daniel Tovesson 2013-07-15 09:35:38

I want to be able to add multiple rows. My question was a bit unclear so I edited it.

@Austin Brunkhorst 2013-07-15 09:38:33

This supports multiple rows.

@Daniel Tovesson 2013-07-15 09:43:53

Oh, that's right. Just made a error trying your code. It's working now. Cheers!

@Daniel Tovesson 2013-07-15 10:05:38

Although, it's not working when wrapping the inputs in a div like <div class="options_part"></div>

@Austin Brunkhorst 2013-07-15 10:07:47

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.

@Daniel Tovesson 2013-07-15 10:19:09

Posting a shorted code-snippet. div.innerHTML = '<div class="options_part"><input type="button" value="-" onclick="removeRow(this)"></div>'; And just by removing the div it's working again.

@Austin Brunkhorst 2013-07-15 10:29:02

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.

@Hoffmann 2018-08-01 12:45:19

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 () {
    `<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)">

function removeRow (input) {
<input type="button" value="+" onclick="addRow()">

<div id="content">

@Arun 2013-07-15 09:30:09

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;

function removeElement(elementId) 


    // Removes an element from the document
    var element = document.getElementById(elementId);

@user2503896 2015-03-06 10:27:16

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

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

@Aarif Qureshi 2013-07-15 09:33:46

please try following to generate

 function addRow()
        var e1 = document.createElement("input");
        e1.type = "text"; = "name1";

        var cont = document.getElementById("content")


@dashme 2013-07-15 09:29:09

make a class for that button lets say :

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

your js should look like this :

      $('div').append('<input type="text"..etc ');

@Austin Brunkhorst 2013-07-15 09:29:56

He didn't mention jQuery.

Related Questions

Sponsored Content

43 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

109 Answered Questions

[SOLVED] How to horizontally center a <div>?

96 Answered Questions

[SOLVED] How can I remove a specific item from an array?

  • 2011-04-23 22:17:18
  • Walker
  • 6945945 View
  • 8506 Score
  • 96 Answer
  • Tags:   javascript arrays

41 Answered Questions

[SOLVED] For-each over an array in JavaScript

61 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

28 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

9 Answered Questions

[SOLVED] Why does HTML think “chucknorris” is a color?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

3 Answered Questions

54 Answered Questions

Sponsored Content