removing dynamically created elements

Question

I have made elements using this function:

    var counterUpload = 1;
     var limit = 20;
     function addUpload(divName){
     if (counterUpload == limit)  {
          alert("You have reached the limit of adding " + counterUpload + " inputs");
     }
     else {
      var newdiv = document.createElement('p');
          newdiv.innerHTML = " <label>Offences: * </label><input required=\"required 
                              \"style=   \"width:670px;\"type=\"text\"
                               name=\"offences["+counterUpload+"]\" 
                               id=\"offences["+counterUpload+"]\"> "
      document.getElementById(divName).appendChild(newdiv);
      counterUpload++;
     }

}

here is my html

<fieldset class="ro5" id="ro5"> <legend>Add New:</legend> <p> <label>Offences: *  </label> <input name="offences" style="width:670px;" type="text" required="required"/>  </p>

divName takes ro5 as argument

this is what i have tried so far:

function removeUpload(divName){
if (limit==counterUpload)  {
  alert("You have reached the limit of removing " + counterUpload + " inputs");
}
else {
  var newdiv = document.removeElement('p');
  if(
  newdiv.innerHTML = " <label>Offences: * </label><input required=\"required\" style=\"width:670px;\"type=\"text\" name=\"offences["+counterUpload+"]\" id=\"offences["+counterUpload+"]\"> "){
  document.getElementById(divName).removeChild(newdiv);}
  counterUpload--;
}

}

from the two answers so far, i have managed to come up with this but still it doesnot get the job done,i feel very close yet far:

function removeUpload(divName) {
// Find the parent element
var parent = document.getElementById(divName);

if (parent) {
    // Find all the child nodes in parent element
    var children = parent.getElementsByTagName("P");
var num=count(children);
for(i = num; i >2 ; i--){
//i gave the P elements to remove an id="paraE" so that i do not remove other P elements //with out this id
    if( children[i].getAttribute('id') == 'paraE'){ 
        parent.removeChild(children[i]);
    } 
    }

}

how can I delete the elements?how can I reverse this function to do the opposite work???

Answer 1

Short answer

// create an element
var p = document.createElement("P");
p.innerHTML = "something";

// append to some other element
document.appendChild(p);

// delete it
p.parentNode.removeChild(p);

Don't do this

p.innerHTML = '<label>' + some_var + '</label>';

instead, create it in a proper way

var label = document.createElement("LABEL");
label.innerHTML = some_var;

The same applies to form elements

var form = document.createElement("FORM");
form.method = "post";
form.action = "some-url"; 

var input = document.createElement("INPUT");
input.type = "text";
input.name = "name";
input.value = ""; 

var button = document.createElement("INPUT");
button.type = "button";
button.name = "button";
button.value = "Submit"; 
button.onclick = function(){
    // do something
};

// append all form element to form and add the form to document
form.appendChild(input);
form.appendChild(button);
document.appendChild("form");

// want to delete all of it?
form.parentNode.removeChild(form);

Removing elements in more details

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

// Removing a specified element without having to specify its parent node
var node = document.getElementById("nested");
if (node.parentNode) {
    node.parentNode.removeChild(node);
}

// Removing all children from an element
var element = document.getElementById("top");
while (element.firstChild) {
    element.removeChild(element.firstChild);
}

YOUR SITUATION

// append it to DOM 
document.getElementById(divName).appendChild(newdiv);

// delete it / remove it from DOM
newdiv.parentNode.removeChild(newdiv);

Let's say, I'm using your function to create an element, and I have no clue how your function is buit inside. All I know is that your function creates an element and gives me the reference in return, So, I call it like this

// let's create a P element
var first_p = your_function('p'); 

// I have it now, and I can reach it by reference (first_p)
// if I want to delete it, I just call this
first_p.parentNode.removeChild(first_p);

// remove the n-th p element
function remove_p(n){
    var p = document.getElementsByTagName("P");
    for(i = 0; i < p.length; i++){
        if(p[i+1] == n){ 
            p[i].parentNode.removeChild(p[i]);
        } 
    }
}

Answer 2

Here's a second function that allows you to remove your child P elements.

function removeUpload(id, num) {
    // Find the parent element
    var parent = document.getElementById(id);

    if (parent) {
        // Find all the child nodes in parent element
        var children = parent.getElementsByTagName('P');

        // If the child exists, remove it
        // We have to subtract 1 because `getElementsyTagName` returns an array
        if (children && children[num - 1) {
            parent.removeNode(children[num - 1]);
        }
    }
}

Answer 3

function removeUpload(element id) {
var myList =ro5.getElementsByTagName('P');//get total number of p elements available
// Find the parent element
var element = document.getElementById(element id);
var tot=myList.length-1;//subtract the one  P element without id="paraE"
if(tot>1)//make sure one p element remains visible always
{element.parentNode.removeChild(element);}
}

that did the trick. I based on the two answers from @rxgx,and @hex494D49:thanks plus this link: add/delete elements dynamically .And after a long while came up with the above and it is working..