Question

我面临一个问题。我需要在单击减号按钮的同时使用Jquery中的ID删除总div。我在下面解释我的代码。

<?php foreach($module as $item){ ?>
<div id="planWithfriends<?php echo $item->id; ?>" class="modal fade" role="dialog">
    <div class="modal-dialog">

          <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">PLAN WITH FRIENDS</h4>
          </div>
          <div class="modal-body">
            <form class="row" action="" method="POST">
              <div class="input_fields_wrap<?php echo $item->id; ?>">
                <div id="parentid<?php echo $item->id; ?>">
                  <div class="form-group col-md-4">
                    <label class="go-right" style="margin-bottom:0px;">Email </label>
                    <input name="email_<?php echo $item->id; ?>[]" id="email_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;">
                  </div>
                  <div class="form-group col-md-4">
                    <label class="go-right" style="margin-bottom:0px;">Phone </label>
                    <input name="phone_<?php echo $item->id; ?>[]" id="phone_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;">
                  </div>
                  <div class="form-group col-md-4">
                    <button type="button" class="add_button_<?php echo $item->id; ?> btn btn-success" style="height:34px;margin-top: 20px;"><i class="fa fa-plus"></i></button>
                  </div>
                </div>
              </div>
              <div class="clear"></div>
              <div class="form-group col-md-12 text-right">
                <button style="margin-top:25px;" type="button" class="btn btn-action" data-dismiss="modal" id="planbutton<?php echo $item->id; ?>">Submit</button>
              </div>
              <div class="clear"></div>
        </form>
      </div>
      <!--<div class="modal-footer" style="text-align:center;">
        <button type="button" class="btn btn-action" data-dismiss="modal">Close</button>
      </div>-->
    </div>
  </div>
</div>
<script type="text/javascript">
  $(function(){
    var addButton = $('.add_button_<?php echo $item->id; ?>');
    var wrapper = $('.input_fields_wrap<?php echo $item->id; ?>');
    $(addButton).click(function(){
      $(wrapper).append('<div id="parentid<?php echo $item->id; ?>"><div class="form-group col-md-4"><input name="email_<?php echo $item->id; ?>[]" id="email_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;"></div><div class="form-group col-md-4"><input name="phone_<?php echo $item->id; ?>[]" id="phone_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;"></div><div class="form-group col-md-4"><button type="button" class="remove_field<?php echo $item->id; ?> btn btn-danger" style="height:34px;margin-top: 20px;"><i class="fa fa-minus"></i></button></div></div>'); //

    })
    $(wrapper).on('click', '.remove_field<?php echo $item->id; ?>', function(e){
      e.preventDefault();
      $(this).parent('#parentid<?php echo $item->id; ?>').remove();
    })
  })
</script>
<?php } ?>

在这里，我创建另一行并单击+按钮，但是当用户单击-按钮时，相应的行应删除，这在我的情况下不会发生。请帮助我解决此问题。

Answer 1

如我所见，您将JavaScript代码放入循环中。请把它放在循环之外：

<script type="text/javascript">
  $(function(){
    var addButton = $('.add_button');
    var wrapper = $('.input_fields_wrap');
    $(addButton).click(function(){
      $(wrapper).append('<div id="parentid"><div class="form-group col-md-4"><input name="email_<?php echo $item->id; ?>[]" id="email_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;"></div><div class="form-group col-md-4"><input name="phone_<?php echo $item->id; ?>[]" id="phone_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;"></div><div class="form-group col-md-4"><button type="button" class="remove_field<?php echo $item->id; ?> btn btn-danger" style="height:34px;margin-top: 20px;"><i class="fa fa-minus"></i></button></div></div>'); //

    })
    $(wrapper).on('click', '.remove_field', function(e){
      e.preventDefault();
      $(this).parent('.parentid').remove();
    })
  })
</script>

并在单击该类时给它一个类remove_field，得到parent div class并做你想做的任何事情。将JavaScript放入PHP循环中的做法不好。

无法在Jquery中使用父div ID删除

1 个答案: