如何在引導程序中刪除輸入組？

Question

這就是我現在所擁有的。 我正在嘗試使用jQuery add（）和append（）方法將字段動態添加到表單中。 但是我想在單擊刪除按鈕時刪除特定的添加字段。

<div class="col-md-12">
    <h3>Added Description Fields</h3>

    <div class="col-md-12" id="descFields">

    </div>
</div>

JS

$(document).ready(function() {

    console.log(descFields);



    $('#addDesc').click(function(e) {

        var descFields = $('#descFields');

        var descLabel = $('#descLabel').val();

        var large = '<div class="form-group" id="descField"><div class="input-group"><input type="text" class="form-control" placeholder="Enter Value For ' + descLabel + '" /><span class="input-group-btn"><button class="btn btn-danger" id="removeDesc" type="button">Remove</button></span></div>';

        descFields.add(large).appendTo(descFields);

        e.preventDefault();

    });

    $('#removeDesc').click(function(e) {

        $(this).remove();


    });
});

當用戶單擊#removeDesc按鈕時，應刪除添加的字段。 我不知道如何實現這一目標。

Answer 1

為刪除按鈕添加點擊事件，如下所示：

    $(document).on("click","#removeDesc",function(e) {

        $(this).remove();
     });

Answer 2

有很多方法可以做到這一點，但是解決您的問題最簡單的方法是：

 $(document).ready(function() { console.log(descFields); $('#addDesc').click(function(e) { var descFields = $('#descFields'); var descLabel = $('#descLabel').val(); var large = '<div class="form-group" id="descField"><div class="input-group"><input type="text" class="form-control" placeholder="Enter Value For ' + descLabel + '" /><span class="input-group-btn"><button class="btn btn-danger" id="removeDesc" type="button">Remove</button></span></div>'; descFields.add(large).appendTo(descFields); e.preventDefault(); }); $('#descFields').on('click', '#removeDesc', function(e) { $(this).parents('.form-group').remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="descLabel"/> <button id="addDesc">Add Desc</button> <div class="col-md-12"> <h3>Added Description Fields</h3> <div class="col-md-12" id="descFields"> </div> </div> 

您的問題是在刪除行的回調中。 文檔加載完成后，您嘗試將click事件附加到對象#removeDesc上，該事件仍然在DOM中不存在，因為它是在用戶單擊#addDesc時動態創建的。 這就是為什么您應該使用：

$('#descFields').on('click', '#removeDesc', function(e) {
    $(this).parents('.form-group').remove();
});

正如@vijayP建議的那樣，您可以使用on（）將事件處理程序附加到容器上，然后在該容器中添加DOM中仍然不存在的對象。 然后，您將查詢選擇器作為第二個參數傳遞，以在執行時篩選哪個子級將觸發事件並執行回調。

我的另一個技巧是，我使用.parents('.form-group')選擇包含該組的div並刪除所有添加的字段，而不是僅刪除按鈕。

編碼愉快！