javascriptで動的に追加されたコントロールを削除する（asp.net mvcで）

Question

私は、人が経費を入れ、追加されたコントロールがテキストボックスとチェックボックス（fx。expense1とmastercard1）のペアで来るフォームを持っています。あまりにも多くのものを追加した場合、これらの「費用」のうちの1つを取り除くことができるようにしたいと思います。

var tbId = 'expense'; 
var chkId = 'Mastercard'; 
var tbCounter = 0; 

$("#txt").click(function() { 

    if(tbCounter > 10){ 
     alert("Der kan ikke tilføjes flere udgifter"); 
     return false; 
    } 

    var br = document.createElement("br"); 
    var ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'Indskriv udgift', id: tbId + (++tbCounter)}).addClass("form-control tb_Id"); 
    var ctrl2 = $('<input/>').attr({ type: 'checkbox', name: 'chk', id: chkId + (tbCounter) }).addClass("chk chk_Id"); 

    $("#ExpenseBoxes").append(br, ctrl, 'Mastercard: ', ctrl2, br); 
}); 

$("#removeBtn").click(function() { 
    if(tbCounter == 0){ 
     alert("Der er ikke mere at fjerne"); 
     return false; 
    } 

    $("#ExpenseBoxes").find(tbId + tbCounter).remove(); 
    tbCounter--; 
}); 

コントロールが挿入されている場所です：

<div class="col-md-10"> 
    <input type="button" id="txt" value="Add TextBox"/> 
    <input type="button" id="removeBtn" value="Slet udgift" /> 
    <div id="ExpenseBoxes"> 
    </div> 
</div> 

私は、この「removeBtn」機能のようなものが働くだろうと思ったが、それはないと私は完全に外れた場合、またはだった場合、私は思っていましたそれをするより良い方法がありますか？

Answer 1

私は先週同様のフォームを作ったが、divの代わりにテーブル/行を使用していたが、私のものはjqueryではなくJSにあった。全体のアイデアは、テーブル内の行を削除することでした。したがって、このようなものになります

この場合、削除する行は1行だけになります。私は、これは

JS

function deleteRow(){ 
     document.getElementById(ptTable).deleteRow(0); 
} 

HTML

<table id="ptTable"> 
    <tr> 
    <td>< input type="button" id="txt" value="Add TextBox"/></td> 
    <td>< input type="button" id="removeBtn" value="Slet udgift" /></td> 
    <td>< button onClick="deleteRow();return false;"/> </td> 
    </tr> 
</table> 

はまた、すべての私のテーブルは、トラックを維持するために、独自のインデックスを持つことができます願っています。

Answer 2

私は同じことをしようとすると、idに関連付けられたclickイベントが最初に動作しないのは奇妙です。 後でhtml要素に結合されたスクリプトは、HTMLコードの最後に置かなければならないことに気づきます。

私は自分のHTMLの下にスクリプトを配置し、それが動作し始めた。

JavaScriptは、HTMLの前にロードされた取得するときに、この背後にある理由は、それがまだロード ではないとして、それ は、ジャバスクリプトで参照DOM要素を見つけることができません。

同じ問題が発生している場合は、同じものを試してください。