ボタンでJqueryを使用してテキストボックスを削除する方法

ここでは、ボタンbtnAddのクリックで新しいテキストボックスを追加したいと思うし、ボタンbtnRemoveを追加して新しく追加したテキストボックスも削除したいクリックしてbtnAddのテキストボックス。
問題は、追加ボタンをクリックすると、削除ボタンと一緒にbtn新しいテキストボックスを追加することです.btnRemoveも必要に応じて追加されます。削除ボタンをクリックすると、それぞれのテキストボックスを削除し、それぞれの削除ボタンは削除されません。以下

は私が削除ボタンのクラスを追加します

ボタンでJqueryを使用してテキストボックスを削除する方法

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta charset="utf-8" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<body> 
<div id="a"> 
    <input id="Text1" type="text" /> 
</div> 
<input id="btnAdd" type="button" value="Add" /> 
<script> 
    $(document).ready(function() { 
     $("#btnAdd").click(function() { 
      $("#a").append('<input type="text" id="Text1" value="" />'+'<input type="button" id="btnRemove" value="Remove"/>'); 
     }); 
     $('#btnRemove').click(function() { 
      $('#Text1').remove(); 
      $(this).remove(); 
     }); 
    }); 
</script> 
</body> 
</html>

出典

2017-01-19 CrossWords

使用[イベント委任]（HTTP ：//learn.jquery.com/events/event-delegation/）動的に生成される要素の場合 – Satpal

参照：[動的にテキストボックスを作成し、jqueryを使用してそれらを削除する]（https://www.google.co.in/url?sa= t＆rct = j＆q =＆esrc = s＆source = web＆cd = 2＆cad = rja＆uact = 8＆ved = 0ahUKEwix9dSpic7RAhVJLo8K Hc1_COgQFggcMAE＆url = http％3A％2F％2Fwww.aspsnippets.com％2FArticles％2FDynamically-add-and-remove-TextBoxes-jQuery.aspx＆usg = AFQjCNGVXWPbc-JJBHIFviSebDP4ZLayyw＆bvm = bv.144224172、d.c2I） –

スクリプトは動作しません動的要素を生成するときに同じIDを再度割り当てようとしているためです。代わりに "クラス"と "名前"属性を使用する必要があります –

を行っているものです。それをbtnRemoveとする。これは動的に生成されるアイテムなので、アイテムを削除するときにイベントを委任する必要があります。

$(this).remove()はボタンを削除しますが、入力ボックスとボタンも削除する必要があります。だから、このスニペットは有用であろう削除ボタン

希望のクリックで、このラッパーdivを削除するdiv &ターゲット内のすべてのものをラップすることをお勧めし

$(document).ready(function() { 
    $("#btnAdd").click(function() { 
    $("#a").append('<div class="con"><input type="text" id="Text1" value="" />' + '<input type="button" class="btnRemove" value="Remove"/></div>'); 
    }); 
    // delegating event here 
    $('body').on('click','.btnRemove',function() { 
    $(this).parent('div.con').remove() 

    }); 
});

DEMO

出典

2017-01-19 11:17:56 brk

ありがとう – CrossWords

ボタンでJqueryを使用してテキストボックスを削除する方法

答えて

関連する問題