javascript - 单击删除按钮时从无序列表中删除特定列表项
问题描述
我是学习 Javascript 的新手。我想删除我的无序列表中的特定列表项。每个项目都有一个删除按钮,我只是不知道我的按钮如何知道它是否是我在不使用索引的情况下选择的项目。
let enterListBtn = document.getElementById("enter");
let input = document.getElementById("userinput");
let ul = document.querySelector("ul");
let togList = document.getElementsByTagName("li");
let deleteBtn = document.getElementById("delete");
function deleteItem() {
togList.parentNode.removeChild(togList);
}
deleteBtn.addEventListener("click", deleteItem);
HTML
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
<li>Notebook <button id="delete">Delete</button></li>
<li>Jello <button>Delete</button></li>
<li>Spinach <button>Delete</button></li>
<li>Rice <button>Delete</button></li>
<li>Birthday Cake <button>Delete</button></li>
<li>Candles <button>Delete</button></li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
解决方案
只需为每个删除按钮添加一个类,在 jquery 中添加单击事件方法,然后获取按钮的父级删除它.. 检查此代码..
$('.delete').on('click', function(){
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
<li>Notebook <button class="delete">Delete</button></li>
<li>Jello <button class="delete">Delete</button></li>
<li>Spinach <button class="delete">Delete</button></li>
<li>Rice <button class="delete">Delete</button></li>
<li>Birthday Cake <button class="delete">Delete</button></li>
<li>Candles <button class="delete">Delete</button></li>
</ul>
</body>
推荐阅读
- python - 返回 2(2) 到 2*(2)
- vuejs2 - 如何将 vue-router 的 $route 和 $router 属性与 vue-class-component 一起使用?
- swiftui - SwiftUI:如何将视图限制为仅在一个方向上调整大小?
- mysql - 使用 $this->getDoctrine()->getManager(); 使用 Symfony 3.3 命令
- docker - 版本碰撞 React 应用程序时如何使用 docker build cache?
- javascript - Vue Single File 组件中的 SCSS 未编译
- python - 如何使用正则表达式匹配括号之间的内容?
- kubernetes - Ansible 变量转换为 int 被忽略
- java - 我在哪里可以为基于 aop 的库创建注入器
- css - Styled-components - 根据 props 设置网格模板