如何使用最接近的选择div

时间：2018-06-05 04:35:43

标签： javascript jquery html

我有一个项目的动态表单。第一行项目表单将显示为（+）和（ - ）按钮，接下来他们在上一行中单击（+）按钮和（ - ），现在我有问题，当我想删除具有（+）和（ - ）的行时），我需要在前一行添加（+）按钮。我读到了最近的并找到了，但我无法使用它。

这是我的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>

感谢您的帮助。

1 个答案:

答案 0 :(得分：4)

What you are looking for is .prev and not .closest.

As correctly pointed out by @Priyal Pithadiya, you will need to add a check before you add element.

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();

Explanation

  • .closest: It looks in the hierarchy and get to the necessary element. It does not look for previous sibling.
  • .prev: It looks for previous sibling.

Sample:

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>

Pointers:

  • IDs must be unique. Having same id in all items div is wrong.
  • You can also add a delegate instead of adding handlers in every item's markup
相关问题
最新问题