Question

这是我的视图，其中我的数据使用foreach动态添加字段： -

<div class="form-body1">
  <div class="col-md-4">        
   <?php if(!empty($content['Items']))
      { 
        $item = json_decode($content['Items'],true);
        foreach ($item as $key => $object) 
        {  ?>
          <?php if($key ==0)
            {
              for($i=0; $i<1 ; $i++ )
              {?>
                <label class="col-md-3 control-label"> Description</label>
                <input type="text" value = '<?php echo $object['Description'];?>'placeholder="Description" name = 'description[]' maxlength="255" class="form-control input-circle"> 
                <label class="col-md-2 control-label">Price</label>
                <input type="number" value = "<?php echo $object['Price'];?>" placeholder="0.00" id="i-item_price_0" name = 'usd[]' autocomplete="off" class="form-control input-circle">

            <?php}
            } 
            else
            { ?>
          <label class="col-md-3 control-label"> Description</label>
          <input type="text" value = '<?php echo $object['Description'];?>'placeholder="Description" name = 'description[]' maxlength="255" class="form-control input-circle">
          <label class="col-md-2 control-label">Price</label>
          <input type="number" value = '<?php echo $object['Price'];?>' placeholder="0.00" id="i-item_price_0" name = 'usd[]' autocomplete="off" class="form-control input-circle">
          <button href="#" id = "remove_field" class="btn btn-danger">Remove</button>
          <br>


            <?php }
        }
      }
      else
      { ?>
    <label class="col-md-3 control-label"> Description</label>
          <input type="text" placeholder="Description" name = 'description[]' maxlength="255" class="form-control input-circle"> <label class="col-md-2 control-label">Price</label><input type="number"  placeholder="0.00" id="i-item_price_0" name = 'usd[]' autocomplete="off" class="form-control input-circle"> 
    <?php } ?>
  </div>        
</div>

正如您在我看来的那样，我已经从变量$ content的数据库中获取了数据。但我还包括添加另一个项目字段，它点燃我的jquery并动态添加“描述”和价格字段以及删除选项。

<div class="form-actions">

  <div class="row">
    <div class="col-md-offset-3 col-md-9">
      <button class="btn btn-circle blue" id = 'add_item' >Add another Item</button>

       <button type="submit" onclick="location.href='<?php echo base_url();?>/index.php/invoice_invoice/create_invoice'"  class="btn btn-circle green">Create Invoice</button>
      <button type="submit" name = 'draft' value = 'draft' onclick="location.href='<?php echo base_url();?>/index.php/invoice_invoice/create_invoice'" class="btn btn-circle grey-salsa btn-outline">Cancel</button>
    </div>
  </div>
</div>

这是运行整个过程的jquery。当我使用来自数据库的数据单击我的动态添加字段的删除按钮时，将删除所有创建的字段。

<script>
$(document).ready(function() {
var max_fields      = 9; //maximum input boxes allowed
var wrapper         = $(".form-body1"); //Fields wrapper
var add_button      = $("#add_item"); //Add button ID

var x = 1; //initial text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment

        $(wrapper).append('<div class="col-md-4"><label class="col-md-3 control-label"> Description</label><input type="text" name = "description[]" placeholder="Description" maxlength="255" class="form-control input-circle" required> <label class="col-md-2 control-label">Price</label> <input type="text" name = "usd[]" placeholder="0.00" id="i-item_price_0" autocomplete="off" class="form-control input-circle" required><button href="#" id = "remove_field" class="btn btn-danger">Remove</button></div>'); //add input box

    }
    else{ alert('Maximum 9 Items!');}
});

$(wrapper).on("click","#remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>

Answer 1

您不应该对多个元素使用相同的id，而是使用class。变化：

<button href="#" id = "remove_field" class="btn btn-danger">Remove</button>

要：

<button href="#" class="btn btn-danger remove_field">Remove</button>

然后选择类而不是id，更改：

$(wrapper).on("click","#remove_field", function(e){});

要：

$(wrapper).on("click",".remove_field", function(e){});

修改：

我不知道如果它们是动态创建的，我怎么能指定不同的id？ - Bhargav Trivedi

您可以使用您定义的x变量来增加id：

<button href="#" id="remove_field_' + x + '" class="btn btn-danger">Remove</button>

“删除”按钮使用数据库中的数据删除所有动态创建的文件

1 个答案: