Question

当我点击带有跨度的按钮时，我试图删除li，但到目前为止还没有成功。

＆＃13;

//delete testCase row when click delete button
$("a[id^='delete-']").click(function() {
  console.log('clicked');
  $(this).remove();
});

＆＃13;

<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>

＆＃13;

Answer 1

此问题是因为您仅删除了this，即。 a。您需要遍历DOM以查找父li，然后删除它：

＆＃13;

$("a[id^='delete-']").click(function() {
  console.log('clicked');
  $(this).closest('li').remove();
});

＆＃13;

<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>

＆＃13;

Answer 2

您必须删除父级。不只是自己。

＆＃13;

//delete testCase row when click delete button
$("a[id^='delete-']").click(function() {
  console.log('clicked');
  $(this).parent().remove();
});

＆＃13;

<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>

＆＃13;

Answer 3

您目前正在定位导致span删除的li不是它的父span。通过将span更改为$(this).remove();来定位所点击的$(this).parent().remove();的父级。

＆＃13;

//delete testCase row when click delete button
$("a[id^='delete-']").click(function() {
  console.log('clicked');
  $(this).parent().remove();
});

＆＃13;

<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>

＆＃13;

Answer 4

如果您要删除li，可以使用jQuery closest转到外部li并删除它。

$(this).closest('li').remove();

＆＃13;

//delete testCase row when click delete button
$("a[id^='delete-']").click(function() {
  console.log('clicked');
  $(this).closest('li').remove();
});

＆＃13;

<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>

＆＃13;

单击时删除父元素

4 个答案: