JavaScript generate and delete html inputs

This generates a new text box with a unique id if you hit the Add button, but if you hit the remove button it removes the last text box.
Try it:

<!DOCTYPE html>
var elements = 0;
function count(elem){
var xPathRes = document.evaluate ('//div[@id="'+elem+'"]/div', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
var actualSpan = xPathRes.iterateNext ();
while (actualSpan) {
actualSpan = xPathRes.iterateNext ();
function add(elem) {
        if(elements <=10){
                document.getElementById(elem).innerHTML+='<div id="SPECIAL_DIV_'+elements+'" >TB'+elements+':<input type="text" id="SPECIAL_TB_'+elements+'" ></div>';
function del(elem) {
        if(elements >=1){
<button onclick="add('demo');">Add</button>
<button onclick="del('demo');">Remove</button>
<div id="demo">
The count function counts the current text boxes, I used XPATH for this and then iterate trough the results to count them.

Leave a Reply

Your email address will not be published.

16 − 6 =