如何刪除jQuery中動態創建的內容

Question

我有一個需要添加和刪除文本框的表單。

我得到了添加文本框部分工作。當你點擊加號按鈕時，新的文本框被添加 - 沒有問題。

但是，當我單擊垃圾桶按鈕時，我無法獲取要刪除的文本框條目。

有什麼想法？

這裏的小提琴 - >https://jsfiddle.net/u4h9ohv6/2/

$('.fcClick').on('click', function(event) { 
    if($(this).attr('name') == 'fcButtonMinus') { 
    $(this).closest('.input-group').find('input').val(''); 
    //$(this).closest("div.input-group").addClass("hideContentBlock"); 
    return false; 
    } 
    if($(this).attr('name') == 'fcButtonPlus') { 
    $('span#fcAdds').append(
     '<div class="col-md-10 persStmtPad input-group" style="margin-top:0.125em;margin-left:35px">' + 
     '<input id="fallCourses" name="fallCourses[]" type="text" placeholder="additional Fall Course" class="form-control input-md">' + 
     '<div class="input-group-btn">' + 
      '<button name="fcButtonMinus" class="btn btn-default btn-md" onClick="fcFunc()" style="background-color:#efefef;color:#999;margin-top:12px" title="Delete this Fall Course"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>' + 
     '</div>' + 
     '</div>' 
    ); 
    return false; 
    } 
}); 

function fcFunc() { 
    $(this).closest("div.input-group").addClass("hideContentBlock"); 
    return false; 
} 

另外，如果您有關於如何防止提交每次點擊的形式任何想法，這將是真棒。現在，即使我有return false，每次點擊都會提交表單。

這裏是我努力使工作代碼：

function fcFunc() { 
    $(this).closest('.input-group').find('input').val(''); 
    $(this).closest("div.input-group").addClass("hideContentBlock"); 
    //$(this).closest("div.input-group").focus(); // did not stop form submit 
    $(this).submit(function(event) { 
    event.preventDefault(); // does not stop form from being submitted 
    }); 
    return alert('interception'); // this works 
    return false; // this too does not do the trick -- the form still tries to submit 
} 

Answer 1

this沒有在該範圍內定義。如果您在onclick屬性中的函數上綁定.bind(this)，則代碼將按預期工作。

$(document.body).on('click', '.fcClick', function(event) { 
 
     if($(this).attr('name') == 'fcButtonMinus') { 
 
     $(this).closest('.input-group').find('input').val(''); 
 
     //$(this).closest("div.input-group").addClass("hideContentBlock"); 
 
     return false; 
 
     } 
 
     if($(this).attr('name') == 'fcButtonPlus') { 
 
     $('span#fcAdds').append(
 
      '<div class="col-md-10 persStmtPad input-group" style="margin-top:0.125em;margin-left:35px">' + 
 
      '<input id="fallCourses" name="fallCourses[]" type="text" placeholder="additional Fall Course" class="form-control input-md">' + 
 
      '<div class="input-group-btn">' + 
 
       '<button name="fcButtonMinus" class="btn btn-default btn-md" onClick="fcFunc.bind(this)()" style="background-color:#efefef;color:#999;margin-top:12px" title="Delete this Fall Course"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>' + 
 
      '</div>' + 
 
      '</div>' 
 
     ); 
 
     return false; 
 
     } 
 
    }); 
 

 
    function fcFunc() { 
 
     $(this).closest("div.input-group").addClass("hideContentBlock"); 
 
     return false; 
 
    }

div.hideContentBlock { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="col-md-10 persStmtPad input-group" style="margin-top: 1.5em;margin-left:35px"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
     <input id="fallCourses" name="fallCourses[]" type="text" placeholder="Fall Course" class="form-control input-md" required="" value="testing"> 
 
     <div class="input-group-btn"> 
 
     <button name="fcButtonMinus" class="btn btn-default btn-md fcClick" style="background-color:#efefef;color:#999;margin-top:12px" title="Erase this Fall Course" value=""><span class="glyphicon glyphicon-erase" aria-hidden="true"></span></button> 
 
     <button name="fcButtonPlus" class="btn btn-default btn-md fcClick" style="background-color:#efefef;color:#999;margin-top:12px" title="Add another Fall Course" value=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> 
 
     </div> 
 
    </div><!-- end input-group --> 
 

 
    <span id="fcAdds"></span>

Answer 2

檢查

$(document).on('click','.fcClick', function(event) { 

    if($(this).attr('name') == 'fcButtonMinus') { 
    $(this).parent().parent().remove(); 

    return false; 
    } 

Answer 3

正如@nurdyguy說，這是因爲你動態創建元素的問題。我在代碼中改變了一些東西，以使其能夠運行並用於快速演示。這是一個工作小提琴：https://jsfiddle.net/u4h9ohv6/8/。

我第一次加入的類test的元素要創建：

<button name="fcButtonMinus" class="test btn btn-default btn-md"...</button> 

最大的變化是開溝的功能和使用是這樣的：

$(document).on('click', '.test', function() { 
    $(this).closest("div.input-group").addClass("hideContentBlock"); 
    return false; 
}); 

這是一個粗略的大綱，但希望能幫助你在正確的方向=）