2

テキストボックスを均等に削除しようとしています。つまり、テキストボックスごとに削除ボタンが必要です。削除ボタンをクリックすると、テキストボックスを削除したい

複数のテキスト ボックスを追加するための 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">﹩&lt;/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">﹩&lt;/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/

4

2 に答える 2

4

削除ボタンにクラスを追加し、.on()on を使用して$("#TextBoxesGroup") 削除イベントを追加できます。このような

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

そして、ここに更新されたフィドルがあります..

于 2013-05-06T07:04:19.570 に答える
0

id完全なドキュメント内の HTML 要素に対して一意です。id複数の要素に同じものを与えています。次に、 を使用してイベント ハンドラーをアタッチするclickと、後で追加される要素ではなく、DOM に既に存在する要素にバインドされます。クリック イベント ハンドラーをアタッチする場合は、次のonようなメソッドを使用する必要があります。

$(document).on('click', '.removeButton', function(e){
    // your logic here...
});
于 2013-05-06T07:15:19.170 に答える