Add elements and remove a specific one that has been added via Javascript

Question

I have the following code that adds a file upload option to a div and will remove the last element added.

<script language="javascript" type="text/javascript">
    function add(type) {
        var element = document.createElement("input");
        element.setAttribute("type", type);
        element.setAttribute("value", type);
        element.setAttribute("name", type);
        element.setAttribute("style", "width: 500px;");
        var newfile = document.getElementById("uploadhere");
        newfile.appendChild(element);           
    }
    function remove() {
        var newfile = document.getElementById("uploadhere");
        newfile.removeChild(newfile.lastChild);
    }

</script>

I am trying to figure out a way to remove a specific element added instead of just removing the last element probably with an index somehow. Or even just having a remove button next to the element created.

edited to add my solution

This is how I solved the issue

<script language="javascript" type="text/javascript">
        var i = 0;
        function add(type) {            
            var element = document.createElement("input");
            element.setAttribute("type", type);
            element.setAttribute("value", type);
            element.setAttribute("name", type);
            element.setAttribute("style", "width: 500px;");
            element.setAttribute("id", "element-" + i);
            var removebutton = document.createElement("input");
            removebutton.type = "button";
            removebutton.value = "Remove";
            removebutton.setAttribute("id", "remove-" + i);
            removebutton.setAttribute("onclick", "remove(" + i + ")");
            var newfile = document.getElementById("uploadhere");
            newfile.appendChild(element);
            newfile.appendChild(removebutton);
            i++;                     
        }
        function remove(id) {            
            document.getElementById("uploadhere").removeChild(document.getElementById("element-" + id));            
            document.getElementById("uploadhere").removeChild(document.getElementById("remove-" + id));
        }

    </script>

I like the idea of having a remove button next to the element created. Makes the removal logic easy to implement. — Sang Suantak
– Sang Suantak, Commented Jan 3, 2012 at 18:01

Rubens Mariuzzo · Accepted Answer · 2012-01-03 18:07:20Z

1

Try this:

<script language="javascript" type="text/javascript">
    var i = 1;
    function add(type) {
        var element = document.createElement("input");
        element.setAttribute("type", type);
        element.setAttribute("value", type);
        element.setAttribute("name", type);
        element.setAttribute("style", "width: 500px;");
        element.setAttribute("id", "element-" + i++);
        var newfile = document.getElementById("uploadhere");
        newfile.appendChild(element);           
    }
    function remove(id) {
        document.getElementById("uploadhere").removeChild(document.getElementById("element-" + i));
    }

</script>

answered Jan 3, 2012 at 18:07

Rubens Mariuzzo

29.4k28 gold badges125 silver badges149 bronze badges

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

Comments

Daniel H · Accepted Answer · 2012-01-05 16:00:25Z

One option, like you said, is to use an index:

function remove(index)
{
  var newfile = document.getElementById("uploadhere");
  newFile.removeChild(newfile.childNodes[index])
}

And remove the newfile.removeChild line in your "add" function

Another option, like you said, is to use a button, which might be easier from a user friendliness standpoint. My preference is to put everything in a table to make it neater:

<table>
  <tbody id="uploadhere">
  </tbody>
</table>

<script>
  var newfile = document.getElementById("uploadhere");

  function add(type) {
    var element = document.createElement("input");
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
    element.setAttribute("style", "width: 500px;");

    // Create your button
    var button = document.createElement("button");
    button.onclick = "newfile.removeChild(this.parentNode.parentNode)";
    var text = document.createTextNode("Remove");
    button.appendChild(text);

    // Create a table row in which to put the data
    var row = newFile.insertRow(-1);

    // Create a table cell in which to put your "input" element
    var cell1 = row.insertCell(-1);
    cell1.appendChild(element);

    // Create a table cell in which to put your button
    var cell2 = row.insertCell(-1);
    cell2.appendChild(button);
  }
</script>

Collectives™ on Stack Overflow

Add elements and remove a specific one that has been added via Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related