Question

在我的代码中，有三个字段由jQuery动态添加。对于添加字段，我的代码工作正常，但是当我想删除那些动态添加的字段时，我的删除字段代码无效。

这是我的代码：

function clone_row() {
    $('#add_more_fields').before('<div class="new_field"><div  class="uk-grid" data-uk-grid-margin><div class="uk-width-medium-1-1"><div class="parsley-row"><label for="site Type">Product <span class="req">*</span></label><input type="text" name="product_require[]" data-parsley-trigger="change" required  class="md-input" /></div></div>
<div class="uk-width-medium-1-1"><div class="parsley-row"><labelfor="site_area">Quantity<span class="req">*</span></label><input type="text" name="quantity[]"  data-parsley-trigger="change" required  class="md-input" /><input type="hidden" name="numb_array[]" value="0" class="form-control array-class" /></div></div>
<div class="uk-width-medium-1-1"><div class="parsley-row"><select id="select_demo_1" name="quantity_type[]" class="md-input"id="val_select" required data-md-selectize><option value="">Select Quantity Type</option><option value="Cubic Yard">Cubic Yard</option><option value="Ton">Ton</option><option value="Piece">Piece</option></select></div></div></div><div class="uk-grid">
<div class="uk-width-1-1"><div class="parsley-row"><button type="button" onclick="close_me(this)"; class="md-btn md-btn-primary pull-right">remove</button></br></div></div></div></div></div> ');
}

function close_me(me) {
    $(me).parent('new_field').remove();
}

Answer 1

您缺少点以指定您要搜索的父类。你的html clone_row（）函数也有拼写错误。

答案是正确的：https://jsfiddle.net/5ufsfLz1/7/

function clone_row() {
    $('#add_more_fields').before('<div class="new_field"><div class="uk-grid" data-uk-grid-margin><div class="uk-width-medium-1-1"><div class="parsley-row"><label for="site Type">Product <span class="req">*</span></label><input type="text" name="product_require[]" data-parsley-trigger="change" required class="md-input" /></div></div><div class="uk-width-medium-1-1"><div class="parsley-row"><label for="site_area">Quantity<span class="req">*</span></label><input type="text" name="quantity[]" data-parsley-trigger="change" required class="md-input" /><input type="hidden" name="numb_array[]" value="0" class="form-control array-class" /></div></div><div class="uk-width-medium-1-1"><div class="parsley-row"><select id="select_demo_1" name="quantity_type[]" class="md-input" id="val_select" required data-md-selectize><option value="">Select Quantity Type</option><option value="Cubic Yard">Cubic Yard</option><option value="Ton">Ton</option><option value="Piece">Piece</option></select></div></div></div><div class="uk-grid"><div class="uk-width-1-1"><div class="parsley-row"><button type="button" onclick="close_me(this)" ; class="md-btn md-btn-primary pull-right">remove</button><br></div>    </div>  </div></div>');
}

function close_me(me) {
    $(me).parents('.new_field').remove();
}

使用正确的HTML：

<div class="new_field">
  <div class="uk-grid" data-uk-grid-margin>
    <div class="uk-width-medium-1-1">
      <div class="parsley-row">
        <label for="site Type">Product <span class="req">*</span></label>
        <input type="text" name="product_require[]" data-parsley-trigger="change" required class="md-input" />
      </div>
    </div>
    <div class="uk-width-medium-1-1">
      <div class="parsley-row">
        <label for="site_area">Quantity<span class="req">*</span></label>
          <input type="text" name="quantity[]" data-parsley-trigger="change" required class="md-input" />
          <input type="hidden" name="numb_array[]" value="0" class="form-control array-class" />
      </div>
    </div>
    <div class="uk-width-medium-1-1">
      <div class="parsley-row">
        <select id="select_demo_1" name="quantity_type[]" class="md-input" id="val_select" required data-md-selectize>
          <option value="">Select Quantity Type</option>
          <option value="Cubic Yard">Cubic Yard</option>
          <option value="Ton">Ton</option>
          <option value="Piece">Piece</option>
        </select>
      </div>
    </div>
  </div>
  <div class="uk-grid">
    <div class="uk-width-1-1">
      <div class="parsley-row">
        <button type="button" onclick="close_me(this)" ; class="md-btn md-btn-primary pull-right">remove</button>
        <br>
      </div>
    </div>
  </div>
</div>

<div id="add_more_fields">

</div>
<a id="more" href="#" onClick="clone_row()">Click me</a>

Answer 2

试试这个

<script>
 function close_me(me)
 {
   $(document).find('.new_field').remove();  
 }
</script>

Answer 3

有轻微的语法错误：

的onclick =＆＃34; close_me（本）＆＃34 ;; - ＆GT;的onclick =＆＃34; close_me（本）;＆＃34;

$（我）.parent（＆＃39; new_field＆＃39）。除去（）; - ＆GT; $（我）.parent（＆＃39; .new_field＆＃39）除去（）;

删除由jquery添加的字段

3 个答案: