admin管理员组

文章数量:1319953

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=".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>

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./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>
  • javascript
  • jquery
  • html
Share Improve this question edited Jun 26, 2014 at 14:30 Chintan Soni asked Jun 26, 2014 at 13:35 Chintan SoniChintan Soni 25.3k26 gold badges112 silver badges176 bronze badges 4
  • 1 Your code should be posted here, and not just in a linked jsbin. – Pointy Commented Jun 26, 2014 at 13:36
  • With your code structure, you might as well remove the parent of the clicked item $(this).parent().remove() – Huangism Commented Jun 26, 2014 at 13:39
  • Sure sir. I am just updating my question here, again. – Chintan Soni Commented Jun 26, 2014 at 13:40
  • Ok sir. I have got the answer. Both of you were right. I am bit confused which to mark as accepted. Therefore, i upvoted both the answers. Thanks for your helping me. – Chintan Soni Commented Jun 26, 2014 at 14:34
Add a ment  | 

2 Answers 2

Reset to default 9

You can select by attributes:

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

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();

本文标签： javascriptjquery delete element by specifying data attributeStack Overflow

版权声明：本文标题：javascript - jquery: delete element by specifying data attribute - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742055457a2418265.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。