刪除按鈕不工作

Question

我工作在窗體上，我有一個生成的字段，添加按鈕是爲了去除選定字段但工作按鈕不起作用..

我試着更改腳本的值，但仍然無法正常工作..

我希望你能幫助我們多謝。

這裏是我的示例代碼

BOOTPLY

JS

$(function() { 

    // Dynamically add/remove inputs for any field[]'s 
    $('.multi-field-wrapper').each(function() { 
    var $wrapper = $('.multi-fields', this); 
    // Add button 
    $(".add-field", $(this)).click(function(e) { 
     $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
    }); 
    // Remove buttons 
    $('.multi-field .remove-field', $wrapper).click(function() { 
     if ($('.multi-field', $wrapper).length > 1) 
     $(this).parent('.multi-field').remove(); 
    }); 
    }); 

}); 

HTML

<div class="multi-field-wrapper"> 
     <div class="multi-fields"> 
      <div class="multi-field"> 
       <div class="row"> 
        <div class="col-md-2"> 
        <input type="text" name="stuff1[]"> 
       </div> 
       <div class="col-md-2"> 
        <input type="text" name="stuff2[]"> 
       </div> 
       <div class="col-md-2"> 
        <input type="text" name="stuff3[]"> 
       </div> 
       <div class="col-md-3"> 
        <input type="text" name="stuff4[]"> 
       </div> 
       <div class="col-md-2"> 
        <button type="button" class="remove-field btn btn-danger">Remove</button> 
       </div> 
       </div> 

       </div> 
      </div> 
      <button type="button" class="add-field btn btn-success">Add field</button> 
     </div> 

Answer 1

.parent(".multi-field")應該.parents(".multi-field")。 .parents更加通用，然後串在一起.parent（）s'。 .parents搜索所有父母的dom作爲給定的選擇器。我認爲這是你的原意。

$(function() { 
 

 
    // Dynamically add/remove inputs for any field[]'s 
 
    $('.multi-field-wrapper').each(function() { 
 
    var $wrapper = $('.multi-fields', this); 
 
    // Add button 
 
    $(".add-field", $(this)).click(function(e) { 
 
     $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).show(500).find('input').val('').focus(); 
 
    }); 
 
    // Remove buttons 
 
    $('.multi-field .remove-field', $wrapper).click(function() { 
 
     if ($('.multi-field', $wrapper).length > 1) 
 
     $(this).parents('.multi-field').remove(); 
 
    }); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="multi-field-wrapper"> 
 
     <div class="multi-fields"> 
 
      <div class="multi-field"> 
 
       <div class="row"> 
 
        <div class="col-md-2"> 
 
        <input name="stuff1[]" type="text"> 
 
       </div> 
 
       <div class="col-md-2"> 
 
        <input name="stuff2[]" type="text"> 
 
       </div> 
 
       <div class="col-md-2"> 
 
        <input name="stuff3[]" type="text"> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <input name="stuff4[]" type="text"> 
 
       </div> 
 
       <div class="col-md-2"> 
 
        <button type="button" class="remove-field btn btn-danger">Remove</button> 
 
       </div> 
 
       </div> 
 
       
 
       </div> 
 
      </div> 
 
      <button type="button" class="add-field btn btn-success">Add field</button> 
 
     </div>

Answer 2

變化$(this).parent('.multi-field').remove();到$(this).parent().parent().remove();

摘錄如下

$(function() { 
 

 
    // Dynamically add/remove inputs for any field[]'s 
 
    $('.multi-field-wrapper').each(function() { 
 
    var $wrapper = $('.multi-fields', this); 
 
    // Add button 
 
    $(".add-field", $(this)).click(function(e) { 
 
     $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
 
    }); 
 
    // Remove buttons 
 
    $('.multi-field .remove-field', $wrapper).click(function() { 
 
     if ($('.multi-field', $wrapper).length > 1) 
 
     $(this).parents('.multi-field').remove(); 
 
    }); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="multi-field-wrapper"> 
 
     <div class="multi-fields"> 
 
      <div class="multi-field"> 
 
       <div class="row"> 
 
        <div class="col-md-2"> 
 
        <input type="text" name="stuff1[]"> 
 
       </div> 
 
       <div class="col-md-2"> 
 
        <input type="text" name="stuff2[]"> 
 
       </div> 
 
       <div class="col-md-2"> 
 
        <input type="text" name="stuff3[]"> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <input type="text" name="stuff4[]"> 
 
       </div> 
 
       <div class="col-md-2"> 
 
        <button type="button" class="remove-field btn btn-danger">Remove</button> 
 
       </div> 
 
       </div> 
 

 
       </div> 
 
      </div> 
 
      <button type="button" class="add-field btn btn-success">Add field</button> 
 
     </div>