<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
width: 300px;
height:40px;
line-height:40px;
background: #eeeeee;
list-style: none;
}
a{
text-decoration: none;
float: right;
padding:5px;
margin:5px;
background: #dddddd;
font-size:16px;
line-height:16px;
text-align: center;
color: #000;
}
</style>
</head>
<body>
<input type="text" id="input">
<input type="submit" id="submit">
<ul id="ul"></ul>
<script>
var input=document.getElementById("input");
var submit=document.getElementById("submit");
var ul=document.getElementById("ul");
submit.addEventListener("click",clickHandler);
function clickHandler(e) {
var li=document.createElement("li");
li.textContent=input.value;
var a=document.createElement("a");
a.textContent="删除";
a.addEventListener("click",aClickHandler);
li.appendChild(a);
ul.appendChild(li);
}
function aClickHandler() {
this.parentElement.remove();
}
</script>
</body>
</html>
通过文本框输入内容,点击后面按钮,增加li,备忘录 ,每增加一个li,li后面增加超链接,点击超链接删除该li
最新推荐文章于 2022-10-12 09:30:01 发布