单击时删除父元素
单击时删除父元素
提问于 2018-01-04 23:14:53
当我单击带有span的按钮时，我正在尝试删除li，但到目前为止还没有成功。
//delete testCase row when click delete button
$("a[id^='delete-']").click(function() {
console.log('clicked');
$(this).remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul id="testCaseList" class="list-group">
<li class="list-group-item justify-content-between">test1<a class="action-icon" id="delete-test1" name="test1"><span class="fa fa-trash"></span></a></li>
<li class="list-group-item justify-content-between">test2<a class="action-icon" id="delete-test2" name="test2"><span class="fa fa-trash"></span></a></li>
</ul>
回答 4
Stack Overflow用户
发布于 2018-01-04 23:16:07
这个问题是因为你只删除了this，即。a。您需要遍历DOM以找到父li，然后删除它：
$("a[id^='delete-']").click(function() {
console.log('clicked');
$(this).closest('li').remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul id="testCaseList" class="list-group">
<li class="list-group-item justify-content-between">test1<a class="action-icon" id="delete-test1" name="test1"><span class="fa fa-trash"></span></a></li>
<li class="list-group-item justify-content-between">test2<a class="action-icon" id="delete-test2" name="test2"><span class="fa fa-trash"></span></a></li>
</ul>
Stack Overflow用户
发布于 2018-01-04 23:16:23
您必须删除父级。不仅仅是它本身。
//delete testCase row when click delete button
$("a[id^='delete-']").click(function() {
console.log('clicked');
$(this).parent().remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul id="testCaseList" class="list-group">
<li class="list-group-item justify-content-between">test1<a class="action-icon" id="delete-test1" name="test1"><span class="fa fa-trash"></span></a></li>
<li class="list-group-item justify-content-between">test2<a class="action-icon" id="delete-test2" name="test2"><span class="fa fa-trash"></span></a></li>
</ul>
Stack Overflow用户
发布于 2018-01-04 23:17:38
您当前的目标是span，而不是它的父li，这会导致删除span。通过将$(this).remove();更改为$(this).parent().remove();，将所单击的span的父级作为目标。
//delete testCase row when click delete button
$("a[id^='delete-']").click(function() {
console.log('clicked');
$(this).parent().remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul id="testCaseList" class="list-group">
<li class="list-group-item justify-content-between">test1<a class="action-icon" id="delete-test1" name="test1"><span class="fa fa-trash"></span></a></li>
<li class="list-group-item justify-content-between">test2<a class="action-icon" id="delete-test2" name="test2"><span class="fa fa-trash"></span></a></li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48098216
复制相关文章
相似问题
腾讯云开发者
