javascript - JQuery 重复字段在删除行时与 Bootstrap 布局混淆

Question

我有一个表格，其中包含我想要重复的一系列字段。我有操作代码但是，当我单击除第一个以外的任何删除按钮时，我的代码会重新排列行中的字段，如下所示：

我的代码如下所示，我认为我的 :first 选择器出错了？？？？

<div class="row">
  <div class="col-12">
      <div id="repeatingTides" class="row">
        <div class="col-md-2 col-lg-4 tidePort">
          <div class="form-group ">
            <label for="tidePort">Tide Port</label>
            <input type="text" id="tidePort" name="tidePort[]" class="form-control <?php echo (!empty($data['formData']['tidePort_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['tidePort']; ?>"/>
            <span class="invalid-feedback"><?php echo $data['formData']['tidePort_error']; ?></span>
          </div>
        </div>
        <div class="col-md-5 col-lg-4 tideHW">
          <label for="hwTime">HW Time & Height</label>
          <div class="input-group ">
            <input type="time" id="hwTime" name="hwTime[]" class="form-control <?php echo (!empty($data['formData']['hwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwTime']; ?>"/>
            <input type="number" step="0.01" id="hwHeight" name="hwHeight[]" class="form-control <?php echo (!empty($data['formData']['hwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwHeight']; ?>"/>
            <span class="invalid-feedback"><?php echo $data['formData']['hwTime_error']; ?></span>
            <span class="invalid-feedback"><?php echo $data['formData']['hwHeight_error']; ?></span>
          </div>
        </div>
        <div class="col-md-5 col-lg-4 tideLW">
          <label for="lwTime">LW Time & Height</label>
          <div class="input-group ">
            <input type="time" id="lwTime" name="lwTime" class="form-control <?php echo (!empty($data['formData']['lwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwTime']; ?>"/>
            <input type="number" step="0.01" id="lwHeight" name="lwHeight[]" class="form-control <?php echo (!empty($data['formData']['lwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwHeight']; ?>"/>
            <div class="input-group-append">
              <button class="btn btn-ym-success btn-add-tide" type="button"><i class="fas fa-plus text-white"></i></button>
            </div>
            <span class="invalid-feedback"><?php echo $data['formData']['lwTime_error']; ?></span>
            <span class="invalid-feedback"><?php echo $data['formData']['lwHeight_error']; ?></span>
          </div>
        </div>
      </div>
    <script>
      $(document).ready(function() {
        var controlFormTides = $('#repeatingTides:first');
        controlFormTides.find('.tideLW:not(:last) .btn-add-tide')
            .removeClass('btn-add-tide btn-ym-success').addClass('btn-remove-tide')
            .removeClass('btn-ym-success').addClass('btn-ym-danger')
            .html('<i class="fas fa-minus text-white"></i>');
      });

      $(document).on('click', '.btn-add-tide', function(e)
      {
        e.preventDefault();
        var controlFormTides = $('#repeatingTides:first'),
            currentTideLW = $(this).parents('.tideLW:first'),
            currentTidePort = $('.tidePort:first'),
            currentTideHW = $('.tideHW:first'),
            newTidePortEntry = $(currentTidePort.clone()).appendTo(controlFormTides);
            newTideHWEntry = $(currentTideHW.clone()).appendTo(controlFormTides);
            newTideLWEntry = $(currentTideLW.clone()).appendTo(controlFormTides);
        controlFormTides.find('.tideLW:not(:last) .btn-add-tide')
            .removeClass('btn-add-tide btn-ym-success').addClass('btn-remove-tide')
            .removeClass('btn-ym-success').addClass('btn-ym-danger')
            .html('<i class="fas fa-minus text-white"></i>');

      }).on('click', '.btn-remove-tide', function(e)
      {
        e.preventDefault();
        $('.tideHW:first').remove();
        $('.tidePort:first').remove();
        $(this).parents('.tideLW:first').remove();

        return false;
      });
    </script>
  </div>
</div>

标签： javascriptjquerybootstrap-4

Answer 1

在您当前，您分别添加所有 div，而不是可以将所有3div 即：tidePort ,tideHW..etc 在某个外部 div 中，并简单地用于.clone()克隆整个 div 并对相同的克隆 div 进行更改。然后，使用 . 附加这个克隆的 div $("#repeatingTides").append(controlFormTides)。

现在，要删除 div，您可以简单地使用$(this).parents('.outer').remove();它来删除添加的整个 div。

演示代码：

$(document).on('click', '.btn-add-tide', function(e) {
  e.preventDefault();
  //get first div insde repeatingtildes
  var controlFormTides = $('#repeatingTides .outer:first').clone(true);
  $(controlFormTides).find('button.btn')
    .removeClass('btn-add-tide btn-ym-success').addClass('btn-remove-tide btn-ym-danger')
    .html('<i class="fa fa-minus"></i>');//add remove class
  $("#repeatingTides").append(controlFormTides)

}).on('click', '.btn-remove-tide', function(e) {
  e.preventDefault();
  $(this).parents('.outer').remove();//remove closest class .outer
  return false;
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-12">
    <div id="repeatingTides">
      <!--added this div-->
      <div class="outer row">
        <div class="col-md-2 col-lg-4 tidePort">
          <div class="form-group ">
            <label for="tidePort">Tide Port</label>
            <input type="text" id="tidePort" name="tidePort[]" class="form-control <?php echo (!empty($data['formData']['tidePort_error'])) ? 'is-invalid' : ''; ?>" value="1" />
            <span class="invalid-feedback"></span>
          </div>
        </div>
        <div class="col-md-5 col-lg-4 tideHW">
          <label for="hwTime">HW Time & Height</label>
          <div class="input-group ">
            <input type="time" id="hwTime" name="hwTime[]" class="form-control <?php echo (!empty($data['formData']['hwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwTime']; ?>" />
            <input type="number" step="0.01" id="hwHeight" name="hwHeight[]" class="form-control <?php echo (!empty($data['formData']['hwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwHeight']; ?>" />
            <span class="invalid-feedback"><?php echo $data['formData']['hwTime_error']; ?></span>
            <span class="invalid-feedback"><?php echo $data['formData']['hwHeight_error']; ?></span>
          </div>
        </div>
        <div class="col-md-5 col-lg-4 tideLW">
          <label for="lwTime">LW Time & Height</label>
          <div class="input-group ">
            <input type="time" id="lwTime" name="lwTime" class="form-control <?php echo (!empty($data['formData']['lwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwTime']; ?>" />
            <input type="number" step="0.01" id="lwHeight" name="lwHeight[]" class="form-control <?php echo (!empty($data['formData']['lwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwHeight']; ?>" />
            <div class="input-group-append">
              <button class="btn btn-ym-success btn-add-tide" type="button"><i class="fa fa-plus "></i></button>
            </div>
            <span class="invalid-feedback"><?php echo $data['formData']['lwTime_error']; ?></span>
            <span class="invalid-feedback"><?php echo $data['formData']['lwHeight_error']; ?></span>
          </div>
        </div>
      </div>
    </div>