javascript - 如何在选择div中使用最接近的值

我有一个动态表格。第一行项目窗体将显示为(+)和(-)按钮，然后它们单击上一行中的(+)按钮和(-)，现在我想删除具有(+)和(- )，我需要在上一行添加(+)按钮。我阅读了有关“最接近”的内容，但是找不到。

这是我的html

var index = 1;

$(document).ready(function() {
  addItems(index);
});

function addItems(index) {
  $('#btn-add-item').remove();

  $('#item_list').append(
    "<div class='items' id='item_" + index + "'>" +
    "<div class='row'>" +
    "<div class='col-md-3'>" +
    "<div class='form-group'>" +
    "<input type='text' class='form-control' name='item_qty[]' placeholder='Item qty' data-error='Item qty cannot empty' required>" +
    "<div class='help-block with-errors'></div>" +
    "</div>" +
    "</div>" +
    "<div class='col-md-7'>" +
    "<div class='form-group'>" +
    "<input type='text' class='form-control' name='item_name[]' placeholder='Item name' data-error='Item name cannot empty' required>" +
    "<div class='help-block with-errors'></div>" +
    "</div>" +
    "</div>" +
    "<div class='col-md-2' id='btn_action'>" +
    "<button id='btn-remove-item' type='button' class='btn btn-danger' style='margin-right: 5px' onclick='removeItem(" + index + ")'><i class='fa fa-minus'></i></button>" +
    "<button id='btn-add-item' type='button' class='btn btn-primary' onclick='addItems(" + (index + 1) + ")'><i class='fa fa-plus'></i></button>" +
    "</div>" +
    "</div>" +
    "</div>"
  );
  index++;
}

function removeItem(index) {
  $('#item_' + index).closest("items").find("#btn_action").append(
    "<button id='btn-add-item' type='button' class='btn btn-primary' onclick='addItems(" + (index + 1) + ")'><i class='fa fa-plus'></i></button>"
  );
  $('#item_' + index).remove();
  index--;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row bg-title">
  <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
    <h4 class="page-title">Tambah Transaksi</h4>
  </div>
  <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
    <ol class="breadcrumb">
      <li>Transaksi</li>
      <li class="active">Tambah Transaksi</li>
    </ol>
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-xs-12">
    <div class="white-box">
      <form action="#" class="form">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Nomor Transaksi</label>
              <input type="text" class="form-control" name="transaction_number" id="transaction_number" disabled>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Nama Pembeli</label>
              <input type="text" class="form-control" name="buyer_name" id="buyer_name">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Alamat Pembeli</label>
              <textarea type="text" class="form-control" name="buyer_address" id="buyer_address" cols="10" rows="5"></textarea>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label>Items</label>
            </div>
          </div>
        </div>
        <div id="item_list"></div>
      </form>
    </div>
  </div>
  <div class="col-md-6 col-xs-12">
    <div class="white-box">
    </div>
  </div>
</div>

感谢您的帮助。

最佳答案

您正在寻找的是.prev而不是.closest。

正如@ Priyal Pithadiya正确指出的那样，您需要在添加元素之前添加一个检查。

var $item = $('#item_' + index)
var shouldAppendButton = !!$item.find('#btn-add-item').length;
if (shouldAppendButton)
  $item
  .prev()
  .find("#btn_action")
  .append(
    "<button id='btn-add-item' type='button' class='btn btn-primary' onclick='addItems(" + (index + 1) + ")'><i class='fa fa-plus'></i></button>"
  );
$item.remove();

说明

.closest:它在层次结构中查找并转到必要的元素。它不查找先前的同级。

.prev:查找上一个同级。

样本:

var index = 1;

$(document).ready(function() {
  addItems(index);
});

function addItems(index) {
  $('#btn-add-item').remove();

  $('#item_list').append(
    "<div class='items' id='item_" + index + "'>" +
    "<div class='row'>" +
    "<div class='col-md-3'>" +
    "<div class='form-group'>" +
    "<input type='text' class='form-control' name='item_qty[]' placeholder='Item qty' data-error='Item qty cannot empty' required>" +
    "<div class='help-block with-errors'></div>" +
    "</div>" +
    "</div>" +
    "<div class='col-md-7'>" +
    "<div class='form-group'>" +
    "<input type='text' class='form-control' name='item_name[]' placeholder='Item name' data-error='Item name cannot empty' required>" +
    "<div class='help-block with-errors'></div>" +
    "</div>" +
    "</div>" +
    "<div class='col-md-2' id='btn_action'>" +
    "<button id='btn-remove-item' type='button' class='btn btn-danger' style='margin-right: 5px' onclick='removeItem(" + index + ")'><i class='fa fa-minus'></i></button>" +
    "<button id='btn-add-item' type='button' class='btn btn-primary' onclick='addItems(" + (index + 1) + ")'><i class='fa fa-plus'></i></button>" +
    "</div>" +
    "</div>" +
    "</div>"
  );
  index++;
}

function removeItem(index) {
  var $item = $('#item_' + index)
  var shouldAppendButton = !!$item.find('#btn-add-item').length;
  if(shouldAppendButton)
    $item
      .prev()
      .find("#btn_action")
      .append(
        "<button id='btn-add-item' type='button' class='btn btn-primary' onclick='addItems(" + (index + 1) + ")'><i class='fa fa-plus'></i></button>"
      );
  $item.remove();
  index--;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row bg-title">
  <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
    <h4 class="page-title">Tambah Transaksi</h4>
  </div>
  <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
    <ol class="breadcrumb">
      <li>Transaksi</li>
      <li class="active">Tambah Transaksi</li>
    </ol>
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-xs-12">
    <div class="white-box">
      <form action="#" class="form">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Nomor Transaksi</label>
              <input type="text" class="form-control" name="transaction_number" id="transaction_number" disabled>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Nama Pembeli</label>
              <input type="text" class="form-control" name="buyer_name" id="buyer_name">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="control-label">Alamat Pembeli</label>
              <textarea type="text" class="form-control" name="buyer_address" id="buyer_address" cols="10" rows="5"></textarea>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label>Items</label>
            </div>
          </div>
        </div>
        <div id="item_list"></div>
      </form>
    </div>
  </div>
  <div class="col-md-6 col-xs-12">
    <div class="white-box">
    </div>
  </div>
</div>

指针:

ID必须是唯一的。所有项目div中都具有相同的ID是错误的。

您还可以在每个项目的标记中添加委托(delegate)，而不是添加处理程序。