JQuery Append Html onclick function

Question

Im пытается удалить текстовое поле равномерно. Я имею в виду для каждого текстового поля я хочу, чтобы удалить Button.If я нажмите кнопку удаления я хочу удалить текстовое поле

Html для добавления несколько текстового поля

<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> 

Это мой сценарий

<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++;; 

});

Нажмите для просмотра http://jsfiddle.net/b8DRT/

Answer 1

Вы можете добавить класс на вашем кнопку Удалить и использовать .on() на вашем $("#TextBoxesGroup") , чтобы добавить событие удалить. Как это

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

А вот обновленный fiddle ..

Answer 2

id является уникальным для HTML-элемента в полном документе. Вы даете то же самое id нескольким элементам. Во-вторых, когда вы присоединяете обработчики событий с помощью click, они привязаны к элементам, которые уже присутствуют в DOM, а не к тем, которые должны быть добавлены позже. Если вы хотите прикрепить нажми обработчик событий следует использовать метод on, как показано ниже:

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