我正在努力删除具有相同类的每个父 div 中除最后一个之外的子 div,我的代码结构如下,我的 Java 脚本用于删除子 div 名称 repeating-div:
$('.repeatable').on('click', '.close-repeating-div', function(e) {
e.preventDefault();
var countdiv = $('.repeatable').children('.repeating-div').length;
if (countdiv > 1) {
$(this).closest('.repeating-div').remove();
}
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="repeatable">
<div class="repeating-div">
<input type="text" class="form-control">
<a href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
</div>
<div class="repeating-div">
<input type="text" class="form-control">
<a href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
</div>
<div class="repeating-div">
<input type="text" class="form-control">
<a href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
</div>
</div>
<div class="repeatable">
<div class="repeating-div">
<input type="text" class="form-control">
<a href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
</div>
<div class="repeating-div">
<input type="text" class="form-control">
<a href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
</div>
<div class="repeating-div">
<input type="text" class="form-control">
<a href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
</div>
</div>
在这里,如果每个父级中有多个子 div,我想删除它们,但我的代码正在计算一个流中的所有子 div,但我需要单独计算它们,如果有多个子 div,则需要删除它们每个父 div 中的子 div
最佳答案
您需要指定您仅在当前 .repeatable
中搜索:
var countdiv = $(this).closest('.repeatable').children('.repeating-div').length;
上面的代码意味着您从触发事件的元素 (.close-repeating-div
) 开始,向上到它的 .repeatable
父级,然后只计数这个 div
的 child 。
关于javascript - 计算父 div 中的子项并通过单击按钮直到最后一个子项删除每个子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48499265/