Question

i have made a function to add new upload and description inputs onClick. How would i make a function to remove the created elements from the bottom to top?

var i = 1;

function add()
{
    var element = document.createElement('input')
    var element1 = document.createElement('input')
    var space = document.createElement('br')
    var des = document.createElement('span')

    var td = document.getElementById('upload')

    des.innerHTML = "Description: "
    element.setAttribute("type", "text")
    element.setAttribute("name", "desciption"+ i)
    element.setAttribute("value", " ")
    element1.setAttribute("type", "file")
    element1.setAttribute("name", "uploadFile"+ i)
    element1.setAttribute("id", "uploadFile"+ i)

    td.appendChild(des)
    td.appendChild(element)
    td.appendChild(element1)
    td.appendChild(space)

}

Answer 1

In your code:

> element.setAttribute("type", "text") 

It is more reliable to set values for standard properties directly:

 element.type = "text";

Anyhow, you can remove the elements using:

   td.removeChild(space);      
   td.removeChild(element1);
   td.removeChild(element);
   td.removeChild(des);

or you can do:

  var nodes = td.childNodes;
  var i = nodes.length;
  while (i--) {
    td.removeChild(nodes[i]);
  }

or more simply:

  td.innerHTML = '';