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

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>