用JavaScript写一个网页可以添加删除列表的内容
时间: 2023-09-29 22:06:42 浏览: 52
好的,以下是一个简单的示例代码,可以实现添加和删除列表内容的功能:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>添加删除列表内容</title>
</head>
<body>
<h2>添加删除列表内容</h2>
<input type="text" id="input">
<button onclick="addItem()">添加</button>
<ul id="list"></ul>
<script src="main.js"></script>
</body>
</html>
```
JavaScript代码:
```
let list = document.getElementById('list');
let input = document.getElementById('input');
function addItem() {
// 创建一个新的列表项
let item = document.createElement('li');
item.innerText = input.value;
// 创建一个删除按钮
let deleteButton = document.createElement('button');
deleteButton.innerText = '删除';
deleteButton.onclick = function() {
list.removeChild(item);
}
// 在列表项中添加删除按钮
item.appendChild(deleteButton);
// 将新的列表项添加到列表中
list.appendChild(item);
// 清空输入框
input.value = '';
}
```
这个代码会创建一个输入框和一个添加按钮,当你输入内容并点击添加按钮时,会在列表中添加一个新的列表项,同时该列表项中有一个删除按钮,可以删除该列表项。