Removing textbox using javascript dynamically

Question

I'm trying to add and remove textboxes dynamically. Adding of textbox is working fine, but removing the textbox is not working. I've defined the onclick method on button element itself. Am I missing anything? There should be a simple mistake.

Here is my code

var container = document.getElementById('divArea');
function RemoveTextBox(div) {   
   document.getElementById("divArea").removeChild(div.parentNode);
}

function addTextBox(value){     
    return '<input name="newTextBox" type="text" value = "' + value + '" />' +
        '<input type="button" value="Remove" class="removeTxtBox" onclick = "RemoveTextBox(this)" />'
}

document.getElementById('btnAdd').onclick = function() {
   var res = document.getElementById('val').value;  
  var div = document.createElement('DIV');
  div.innerHTML = addTextBox(res);
  container.appendChild(div);
}

My JS Fiddle https://jsfiddle.net/2ddaw4zf/1/

https://jsfiddle.net/arunpjohny/2ddaw4zf/2/ - move the script to the bottom of body - In fiddle > script panel > Settings Icon(top right) > Load Type — Arun P Johny, Mar 09 '16 at 04:13
In your console you should have seen an error like `Uncaught ReferenceError: RemoveTextBox is not defined` - because in fiddle the script is by default added to an `onload` handler, so your function `RemoveTextBox` is available only inside that handler, but you are trying to call it from the window scope resulting in the error — Arun P Johny, Mar 09 '16 at 04:15

Removing textbox using javascript dynamically

0 Answers0