jQuery -在div中查找自身的索引
jQuery -在div中查找自身的索引
提问于 2018-07-12 05:14:57
<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代码只适用于第二行，而从第三行来看，remove图标将无法工作(第一行永远不会被删除，因为它是标题行)。
看上去是这样的。
如何编辑jQuery代码，以便检测用户单击的行，并只删除该行？
++附加信息在底部有一个“添加”按钮，当我单击该按钮时会添加新的行。因此，最初只有两行，标题行和输入行。如果单击“添加”按钮，将添加一个新的输入行，并且在新添加的行上无法识别单击。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-12 05:36:00
- 使用
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();
}
});Stack Overflow用户
发布于 2018-07-12 05:20:47
尝试如下:您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51297751
复制相关文章
相似问题
腾讯云开发者
