無法在Jquery中使用父div ID刪除

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循環中的做法不好。