Question

HTML

<form class="data-table">
  <div class="row">...</div>
  <div class="row">...</div>
  <div class="row>
    <div class="col-lg-3">...</div>
    <div class="col-lg-3">...</div>
    <div class="col-lg-3">
      <div class="has-box">
        <input ...>
        <button> ...</button>
        <div class="modal">...</div>
        <ul class="panel_toolbox">
          <li>
            <a class="close-link">
              <i class="fa fa-close"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</form>

在<form>内部，有多个<div class="row">。除第一行外，所有其他行内部都具有<i class="fa fa-close">。我的代码的目的是允许用户单击“ x”图标来删除行。但是为了做到这一点，我首先需要知道用户单击了哪一行。

JavaScript

$('.close-link').click(function () {
    // if statement makes sure that the user doesn't remove the first row
    if ($('form.data-table').children().length > 2) {
        var $ROW = $(this).closest('.row');
        $ROW.remove();
    }
});

上面的Javascript代码仅适用于第二行，而从第三行开始，删除图标将无效（第一行永远不会被删除，因为它是标题行）。

这是它的样子。

如何编辑jQuery代码，以便能够检测用户单击了哪一行，并仅删除该行？

++附加信息底部有一个“添加”按钮，当我单击该按钮时会添加新行。因此，最初只有两行，标题行和输入行。如果单击添加按钮，则会添加一个新的输入行，并且在新添加的行中无法识别该点击

Answer 1

尝试以下操作：您可以使用closest()函数找到父div，然后将其删除。使用index查找行的位置，以便第一行不会被删除。请检查以下代码。

$(document).ready(function() {
    $(document).on("click", ".close-link", function() {
        var parent = $(this).closest(".row");
        var index = parent.index();
        if (index > 0) {
            parent.remove();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="data-table">
  <div class="row">...</div>
  <div class="row">...</div>
  <div class="row">
    <div class="col-lg-3">...</div>
    <div class="col-lg-3">...</div>
    <div class="col-lg-3">
      <div class="has-box">
        <input value="This is value">
        <button>Button</button>
        <div class="modal"></div>
        <ul class="panel_toolbox">
          <li>
            <a class="close-link">Close
              <i class="fa fa-close"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</form>

Answer 2

使用closest('div.row')。
还将长度更改为 1

示例：

$('.close-link').click(function() {
  // if statement makes sure that the user doesn't remove the first row
  if ($('form.data-table').children().length > 1) {
    var $ROW = $(this).closest('div.row');
    $ROW.remove();
  }
});

更新：（根据问题的更新）

使用以下类型的click事件来使动态添加的行也起作用。

$("form.data-table").on("click", ".close-link", function() {
  // if statement makes sure that the user doesn't remove the first row
  if ($('form.data-table').children().length > 1) {
    var $ROW = $(this).closest('div.row');
    $ROW.remove();
  }
});

jQuery-在div中查找自身的索引

2 个答案: