使用jQuery刪除文本字段

Question

我做了一個添加和刪除jQuery的文本框字段和添加功能工作正常，但刪除功能導致問題。添加後無法刪除字段。我試圖檢測它後面的錯誤，但找不到任何。

請我需要新鮮的眼睛來幫助我檢測出錯位置。 下面是代碼：

<script> 
 

 
$(document).ready(function() { 
 

 
    // Variables 
 
    var hello = '<div id="p"><div class="row"><div id="p" class="col-md-4"><input type="text" name="make" class="form-control"></div><div class="col-md-3"><input type="text" name="make" class="form-control"></div><div class="col-md-2"><input type="text" name="model" class="form-control"></div><div class="col-md-2"><input type="text" name ="serial" class="form-control"></div><div class="col-md-1"><span id="remove" class="btn btn-xs btn-danger"><b> - </b></span></div><br><br></div></div>'; 
 
\t 
 
    // Add rows to the form 
 
    $("#add").click(function() { 
 
    $("#fields").append(hello); \t 
 
    }); 
 
\t 
 
    // Remove rows from the form 
 
    $("#fields").on('click', '#remove', function() { 
 
    $(this).parent('#p').remove(); \t 
 
    }); 
 
\t \t \t 
 
    // Populate values from the first row 
 
\t 
 
}); 
 

 
</script>

<div class="container"> 
 
    <div class="row" style="padding-top: 7%;" > 
 
     <div class="col-md-offset-1 col-sm-offset-2 col-md-10 col-sm-8"> 
 
      <div class="card"> 
 
       <div class="card-body"> 
 
        <form class="form" role="form"> 
 
         <div class="form-group floating-label"> 
 
          <input readonly type="text" class="form-control input-lg" id="large4" > 
 
          <label for="large4">Request Title</label> 
 
         </div> 
 
         <div class="form-group floating-label"> 
 
          <input readonly type="text" class="form-control input-lg" id="default4"> 
 
          <label for="default4">Objective of Request</label> 
 
         </div> 
 
         <div class="form-group floating-label"> 
 
          <br> 
 
          <div class="row"> 
 
           <div class="col-md-4 text-center"> 
 
            <b>Items</b> 
 
           </div> 
 
           <div class="col-md-3 text-center"> 
 
            <b>Specs (if any)</b> 
 
           </div> 
 
           <div class="col-md-2 text-center"> 
 
            <b>Quantity</b> 
 
           </div> 
 
           <div class="col-md-2 text-center"> 
 
            <b>Amount</b> 
 
           </div> 
 
           <div class="col-md-1"> 
 
           </div> 
 
          </div> 
 
         </div> 
 
         <div id="fields" class="form-group floating-label"> 
 
          <div class="row"> 
 
           <div class="col-md-4"> 
 
            <input type="text" name="make" class="form-control"> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <input type="text" name="make" class="form-control"> 
 
           </div> 
 
           <div class="col-md-2"> 
 
            <input type="text" name="model" class="form-control"> 
 
           </div> 
 
           <div class="col-md-2"> 
 
            <input type="text" name ="serial" class="form-control"> 
 
           </div> 
 
           <div class="col-md-1"> 
 
            <a href="#" id="add" class="btn btn-sm btn-success"><b> + </b></a> 
 
           </div> 
 
           <br><br> 
 
          </div> 
 
         </div> 
 
         <div class="card-actionbar"> 
 
          <div class="card-actionbar-row"> 
 
           <br><br> 
 
           <button type="submit" class="btn btn-flat btn-primary ink-reaction">SUBMIT</button> 
 
          </div> 
 
         </div><!--end .card-actionbar --> 
 
        </form> 
 
       </div><!--end .card-body --> 
 
      </div><!--end .card --> 
 
     </div><!--end .col --> 
 
    </div><!--end .row --> 
 
</div> 
 

 
<!-- END SIZES -->

Answer 1

您#remove元更改爲<a href="#" id="remove" class="btn btn-xs btn-danger"><b> - </b></a>。

並將您的刪除功能更改爲以下。確保你使用最接近的而不是父母。

$("#fields").on('click', '#remove', function(){ 
     $(this).closest('#p').remove(); 
}); 

讓我知道如果您有任何問題。

Answer 2

的問題是在一行：

$(this).parent('#p').remove(); 

從jQuery docs：

...父（）方法橫穿至直接親本的每這些元素的...

您應該使用.closest()方法。從jQuery docs：

對於組中的每一個元素，獲取通過測試元件本身和通過其 祖先 DOM樹向上遍歷 選擇相匹配的第一個元素。

所以，你的代碼應該看起來像：

$(this).closest('#p').remove(); 

與一個或多個音符。我認爲，對於可能會使用相同ID重複的元素來說，使用id不是最好的做法。這可能會導致問題。

Answer 3

https://jsfiddle.net/1aurfeox/1/

你不需要創建一個字符串變量。你可以克隆第一個存在的元素，然後在它上面創建可移動的行。

$(document).ready(function() { 
    //Variables 
    var hello = $("div#fields .row").clone(); 
    hello.find("#add").parent().html('<a href="#" id="remove" class="btn btn-sm btn-danger"><b> - </b></a>'); 
    //Add rows to the form 
    $("#add").click(function() { 
     $("#fields").append(hello.clone()); 
     $("#remove").click(function() { 
     $(this).closest(".row").remove(); 
     }); 
    }); 
    });