CODEWITHSUNDEEP
javascriptjquery
sdadsa
sdadsa

Reputation: 69

Delete parent element on click

I'm trying to delete the li when I click the button with a span but so far no success.

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

Upvotes: 2

Views: 336

Answers (4)

Mamun
Mamun

Reputation: 68933

You are currently targeting the span not it's parent li which causing the deletion of span. Target the parent of clicked span by changing $(this).remove(); to $(this).parent().remove(); .

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

Upvotes: 1

Nope
Nope

Reputation: 22339

If you want to remove the li you can use jQuery closest to get to the outer li and remove that.

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


//delete testCase row when click delete button
$("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>

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 122026

You have to delete the parent. Not just itself.

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

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337701

This issue is because you delete this only, ie. the a. You need to traverse the DOM to find the parent li, then remove that:

$("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>

Upvotes: 5

Related Questions