adding and removing dynamic textboxes

Question

I have the following code that adds a text area to my page. It also appends a 'remove' button so that the user can remove a text area. The problem is, the text areas are removed when the user clicks the remove button AND anywhere in the text area...I am not sure why this is happening.

Can someone take a quick look at my code? Maybe I am missing something.

Thanks!

$("#btnAddTools").click(function () {
        if(counter>10){
            alert("Only 10 learning Tools allowed per page.");
            return false;
        }   

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + counter);
        newTextBoxDiv.after().html(
              "<label></label>" +
              "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'></textarea>" +

              '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools">').click(function () {
                   $(this).remove();
                   counter--;
                });
        newTextBoxDiv.appendTo("#ToolsGroup");
        counter++;
    });

please provide jsfiddle eample.

ebram khalil
– ebram khalil

2013-04-11 14:17:57 +00:00
Commented Apr 11, 2013 at 14:17 — ebram khalil
– ebram khalil, Commented Apr 11, 2013 at 14:17
What is a jsfiddle eample? thanks

SkyeBoniwell
– SkyeBoniwell

2013-04-11 14:20:11 +00:00
Commented Apr 11, 2013 at 14:20 — SkyeBoniwell
– SkyeBoniwell, Commented Apr 11, 2013 at 14:20
Don't forget to mark a question as the answer! Thanks.

Jordan
– Jordan

2013-04-11 15:04:36 +00:00
Commented Apr 11, 2013 at 15:04 — Jordan
– Jordan, Commented Apr 11, 2013 at 15:04

Jordan · Accepted Answer · 2013-04-11 14:20:09Z

With this code:

newTextBoxDiv.after().html(
          "<label></label>" +
          "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'>    </textarea>" +

          '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools">').click(function () {

You're applying the click function to the button, the label and the entire TextArea.

One work around would be to create a seperate function and use onClick on the button in your code.

Something like this:

newTextBoxDiv.after().html(
      "<label></label>" +
      "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'>    </textarea>" +

      '&nbsp;&nbsp;<input type="button" value="Remove" onClick="functionName(param)" class="removeTools">');

Then have a seperate function:

function functionName(param) {
  //code
}

Michael Aguilar · Accepted Answer · 2013-04-11 14:23:56Z

You can use this code

var counter=0;
$("#btnAddTools").click(function () {
    if(counter>10){
        alert("Only 10 learning Tools allowed per page.");
        return false;
    }   

    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + counter);
    newTextBoxDiv.after().html(
          "<label></label>" +
          "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'></textarea>" +

          '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools">');
    newTextBoxDiv.appendTo("#ToolsGroup");
    counter++;
});
$(document).on('click','.removeTools'.function(){
    $(this).prev().remove();
});

ebram khalil · Accepted Answer · 2013-04-11 14:24:39Z

the problem in your code is that you add the click event to the whole new html that you add.

kindly check this new code

var counter = 0;
$("#btnAddTools").click(function () {
    if (counter > 10) {
        alert("Only 10 learning Tools allowed per page.");
        return false;
    }

    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + counter);
    newTextBoxDiv.after().html(
        "<label></label>" +
        "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'></textarea>" +

        '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">');
    newTextBoxDiv.appendTo("#ToolsGroup");
    counter++;
});

function removeTextArea(textAreaElement) {
    $(textAreaElement).parent().remove();
    counter--;
}

this doesn't work, nothing happened when I clicked the remove button

Collectives™ on Stack Overflow

adding and removing dynamic textboxes

3 Answers 3

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Linked

Related