CODEWITHSUNDEEP
javascriptjqueryhtml
Chintan Soni
Chintan Soni

Reputation: 25267

jquery: delete element by specifying data attribute

Ok. so i have got stuck in a simple situation. I want to delete <li> elements present inside some <ul>, but from its data-* attribute.

I tried the code but dont know why its not working. Check out my jsbin.

Please specify where i was going wrong (because i need to learn from it).

I know its much easy for you all... but i am not able to make out... so needed your help. Thanks..

My code:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
  <script>
  function deleteElement(id)
  {
    $("ul li").data("id", id).remove();
  }
  </script>
</head>
<body>
<ul>
  <li data-id="3">3<input type="button" onclick="deleteElement(3)" value="delete"></li>
  <li data-id="31">31<input type="button" onclick="deleteElement(31)" value="delete"></li>
  <li data-id="32">32<input type="button" onclick="deleteElement(32)" value="delete"></li>
  <li data-id="33">33<input type="button" onclick="deleteElement(33)" value="delete"></li>
  <li data-id="41">41<input type="button" onclick="deleteElement(41)" value="delete"></li>
  <li data-id="42">42<input type="button" onclick="deleteElement(42)" value="delete"></li>
  <li data-id="43">43<input type="button" onclick="deleteElement(43)" value="delete"></li>
</ul>

</body>
</html>

Upvotes: 0

Views: 3786

Answers (2)

MrCode
MrCode

Reputation: 64526

You can use the attribute selector:

$('ul li[data-id="' + id + '"]').remove();

Or filter, if you don't want to concatenate the variable into the selector:

$('ul li').filter(function(){
    return $(this).data('id') == id;
}).remove();

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

You can select by attributes:

$("ul li[data-id=" + id + "]").remove();

Upvotes: 9

Related Questions