Javascript genreate removeChild and appendChild on click

Question

I have a link on which I am generate input, label and text on click event and I would like to delete it at the next click event on the same link:

It doesn't work, here 's my new code :

var addAnswer = (function() {

   var label;
   var text;

   return function (array_output) {


  label.parentNode.removeChild(label);
  label.removeChild(text);
  text = null;
  label = null;


  label = document.createElement('label');
  text = document.createTextNode(array_output[i]);

  document.body.appendChild(label)
  label.appendChild(text);

 };

}());

var tab = ['one', 'two','three','four','five']  
var label = document.createElement('label');
var i = 0;

window.onclick = function () {

     addAnswer(tab);
     i++;   
}

I would like to see, at click event, "one" then onother click : 'two', then click again : 'three'...

EDIT: OK i finally found out :

  var addAnswer = (function() {

  var label;
  var text;

  return function (array_output) {

if(label) { 

  label.parentNode.removeChild(label);
  label.removeChild(text);
  text = null;
  label = null;


  label = document.createElement('label');
  text = document.createTextNode(array_output[i++]);

  document.body.appendChild(label)
  label.appendChild(text);

}else{

  label = document.createElement('label');
  text = document.createTextNode(array_output[i]);

  document.body.appendChild(label)
  label.appendChild(text);
}

};

}());

var tab = ['one', 'two','three','four','five']  
var label = document.createElement('label');
var i = 0;

window.onclick = function () {

     addAnswer(tab);    
}

Answer 1

Each time you call the function, a new execution context is created. So when you do:

if(label) {
    label.parentNode.removeChild(label)
}

then label will always be undefined since it is not assigned a value until later. You likely need to store a reference to the created element so you can delete it later. A closure may suit:

var addAnswer = (function() {

  // Declare label here in "outer" execution context
  var label;

  return function (array_output) {

    // If label is truthy, assume references an element so remove it
    // and then remove reference so it's available for garbage collection
    if(label) {
      label.parentNode.removeChild(label);
      label = null;

    // If label was falsey, create a new one and keep a reference
    } else {

      // do stuff

      // don't declare label here so reference is kept using
      // the variable "label" in the outer scope
      label = document.createElement('label');

      // do more stuff
    }
  };
}());

The above will add a label on the first click, then remove it on the next. But it will only work for one label at a time. Is that what you want, or do you want to be able to add lots of elements? If so, you can store references in an array, then iterate over the array to remove them.