单击时删除父元素

Question

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> 

Answer 1

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> 

Answer 2

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> 

Answer 3

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> 

Answer 4

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>