Home/ Questions/Q 8443997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:17:25+00:00

[+] //each time I click this button the textbox will generate and I want

  • 0

[+] //each time I click this button the textbox will generate and I want to have a link beside each textbox, link is “remove” when I click “REMOVE” the textbox will remove..

[hello1] Remove

[hello2] Remove

[hello3] Remove

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var i=0,j=0;
var t1= new Array(); 
function createtext(){
  i++;
  t1[i]=document.createElement('input');
  t1[i].type='text';
  t1[i].name='text'+i;
  t1[i].value = "hello"+i;
  t1[i].size = 10;
  document.forms[0].appendChild(t1[i]);
  var mybr=document.createElement("br");
  document.forms[0].appendChild(mybr);
}
</SCRIPT>
</HEAD>
<BODY >
  <form action="" method="get" name="f1">

    <input name="b1" type="button" onClick="createtext()" value="+">

    <input name="b1" type="Submit"><br>

  </form>
</BODY>
</HTML>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can add a remove button along with the input tag like this:

    var i=0,j=0;
var t1= [];

function add(){
    i++;
    var parent = document.forms[0];
    var div = document.createElement('div');
    var input = document.createElement('input');
    input.type='text';
    input.name='text'+i;
    input.value = "hello"+i;
    input.size = 10;
    t1.push(input);
    div.appendChild(input);
    var removeButton = document.createElement("button");
    removeButton.innerHTML = "Remove";
    removeButton.onclick = function(e) {
        this.parentNode.parentNode.removeChild(this.parentNode);
        return(false);
    };
    div.appendChild(removeButton);
    parent.appendChild(div);
}

    Working demo: http://jsfiddle.net/jfriend00/ky9nv/

    This code makes it easier to remove an input element and it’s associated button by enclosing them in a containing div. A clicked button can then just get it’s parent container and remove that.

    And, since your question is tagged with jQuery (thought it doesn’t save you a lot here), here’s a version that uses jQuery:

    var i=0,j=0;
var t1= [];

function add(){
    i++;
    var div = $('<div>');
    var input = $('<input>')
        .attr({
            size: '10',
            type: 'text',
            name: 'text' + i,
            value: 'hello' + i
        }).appendTo(div).get(0);
    t1.push(input);
    $('<button>Remove</button>')
        .click(function() {
            $(this).parent().remove();
        }).appendTo(div);
    $("#myForm").append(div);
}

add();
add();

$("#add").click(add);

    Working example: http://jsfiddle.net/jfriend00/nbXak/

    • 0