水果列表的增加删除(js)
Posted kaolagirl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了水果列表的增加删除(js)相关的知识，希望对你有一定的参考价值。
效果图
示例代码
html代码
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水果列表</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<input type="text" placeholder="请输入喜欢的水果">
<button class="addBtn">添加</button>
<ul class="nav">
<li>苹果 <button>删除</button></li>
<li>香蕉<button>删除</button></li>
<li>鸭梨<button>删除</button></li>
</ul>
</div>
<script>
let addBtn = document.querySelector(".addBtn");
let inp = document.querySelector("input");
let ul = document.querySelector("ul");
let list = document.querySelectorAll("li");
addBtn.onclick = function()
let str = inp.value;
let li = document.createElement("li");
let txt = document.createTextNode(str);
let btn = document.createElement("button");
btn.innerHTML = "删除";
li.appendChild(txt);
li.appendChild(btn);
ul.appendChild(li);
//通过遍历绑定事件,后添加的元素无法绑定事件
// for(let i in list)
// list[i].onclick = function()
// this.removeChild(this);
//
//
//事件委托:元素将自己的事件委托给父级去处理
ul.onclick = function(e)
let target = e.target; //获取目标对象
let li = target.parentNode; //获取目标对象的父级元素
ul.removeChild(li);
</script>
</body>
</html>
css代码
*
margin:0px;
padding: 0px;
.container
margin:50px;
width: 300px;
li
list-style: none;
input
outline: none;
border:1px solid #ccc;
width: 200px;
height: 30px;
padding-left:10px;
button
width: 60px;
height: 30px;
color:#fefefe;
background-color: blue;
border:none;
text-align: center;
line-height: 30px;
margin-left:20px;
.nav
margin-top:10px;
border:1px solid #ccc;
.nav li
height:40px;
line-height: 40px;
border-bottom:1px solid #ccc;
display: flex;
justify-content: space-between;
.nav li button
margin-top:5px;
以上是关于水果列表的增加删除(js)的主要内容，如果未能解决你的问题，请参考以下文章
有3种水果（苹果香蕉橘子），每位同学只能选1种最爱吃的（共5位同学），要求编一个统计水果票数的程序，先输入水果种类，最后输出各水果得票结果。
有3种水果（苹果香蕉橘子），每位同学只能选1种最爱吃的（共5位同学），要求编一个统计水果票数的程序，先输入水果种类，最后输出各水果得票结果。