JQuery Append Html onclick function

Question

Im trying to remove the text box evenly. I mean for each textbox i want the remove button.If i click the remove button i want to delete the textbox

Html for adding multiple text box

<pre><div id="TextBoxDiv1">
                    <label style="float: none;"> Bus Model &nbsp;&nbsp;&nbsp;
                    <input style="width: 150px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="numsValid" id="numsValid">
                    <img src="images/india_rupess.png" style="margin-left:18px;"> :</label>
                    <input style="width: 150px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="numsValid" id="numsValid">
                    <label style="float: none;margin-left: 16px;"><span class="font-dollar">﹩</span>&nbsp; :</label>
                    <input style="width: 150px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="numsValid" id="numsValid">
                    &nbsp;&nbsp;<a href="javascript:;" id="addButton">Add</a>&nbsp;&nbsp;<a href="javascript:;" id="removeButton">Remove</a>
                    </div></pre>

This is my script

<pre>var counter = 2;
$("#addButton").click(function () {


    $("#TextBoxesGroup").append('<div id="TextBoxDiv'  + counter +   '" class="textadd""><label style="float: none;"> Bus Model &nbsp;&nbsp;&nbsp;<input style="width: 150px;margin-left:3px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]" name="bus' + counter +   '" id="numsValid"><img src="images/india_rupess.png" style="margin-left:21px;"> :</label><input style="width: 150px;margin-left:3px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]"  name="rs' + counter +   '" id="numsValid"><label style="float: none;margin-left: 19px;"><span class="font-dollar">﹩</span>&nbsp; :</label><input style="width: 150px;margin-left:2px;" type="text" value="" class="validate[required,custom[onlyNumberSp]]"  name="dollar' + counter + '" id="numsValid">&nbsp;&nbsp;<a href="javascript:;" onClick="javascript:alert("test");"   >Remove</a></div>');

counter++;;

});

Click to view http://jsfiddle.net/b8DRT/

Answer 1

You may add a class on your delete button and use .on() on your $("#TextBoxesGroup") to add the remove event. Like this

    $("#TextBoxesGroup").on('click', '.removeButton', function(){
        $(this).closest('div').remove();        
    });

And here's the updated fiddle..

Answer 2

id is unique for an HTML element in complete document. You are giving same id to multiple elements. Secondly when you attach event handlers using click, they are bound to elements that are already present in the DOM and not the ones which are to be added later. If you want to attach click event handlers you should use the on method like below:

$(document).on('click', '.removeButton', function(e){
    // your logic here...
});