javascript - 如何在每个列表项之前添加一个复选框,在列表项之后添加一个删除按钮?
问题描述
我用 HTML/Javascript 创建了一个待办事项列表。如何在添加到列表的每个项目的左侧添加一个复选框,并在添加的每个项目的右侧添加一个 X 按钮以将其从列表中删除。这是我到目前为止得到的
var inputItem = document.getElementById("inputItem");
inputItem.focus();
// adds input Item to list
function addItem(list, input) {
var inputItem = this.inputItem;
var list = document.getElementById(list);
var listItem = document.createElement("li");
listItem.innerText = input.value;
list.appendChild(listItem);
inputItem.focus();
inputItem.select();
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form onsubmit="return addItem('list', this.inputItem)">
<input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
<input type="submit">
</form>
<ul id="list">
</ul>
</body>
</html>
解决方案
继续使用与以前相同的技术,只需继续创建所需的元素并将它们附加到列表项即可。
var inputItem = document.getElementById("inputItem");
inputItem.focus();
// adds input Item to list
function addItem(list, input) {
var inputItem = this.inputItem;
var list = document.getElementById(list);
var listItem = document.createElement("li");
// Configure the delete button
var deleteButton = document.createElement("button");
deleteButton.innerText = "X";
deleteButton.addEventListener("click", function() {
console.log("Delete code!");
});
// Configure the check box
var checkBox = document.createElement("input");
checkBox.type = 'checkbox';
// Configure the label
var label = document.createElement("label");
var labelText = document.createElement("span");
labelText.innerText = input.value;
// Put the checkbox and label text in to the label element
label.appendChild(checkBox);
label.appendChild(labelText);
// Put the label (with the checkbox inside) and the delete
// button into the list item.
listItem.appendChild(label);
listItem.appendChild(deleteButton);
list.appendChild(listItem);
inputItem.focus();
inputItem.select();
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form onsubmit="return addItem('list', this.inputItem)">
<input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
<input type="submit">
</form>
<ul id="list">
</ul>
</body>
</html>
推荐阅读
- python - 在 Python 中向 Raspberry Pi 上的 HID 设备发送和接收字节?
- symfony - Symfony 4 的认证问题
- javascript - 可以将基于类的样式转换为 VueJS 组件的内联样式吗?
- kubernetes - Apache Flink - 在作业部署期间重复消息处理,以 ActiveMQ 作为源
- javascript - 这个平滑滚动脚本能否在 Next.js 和 React 环境中实现和工作?
- javascript - React 头盔不覆盖标题和元标记
- python - 从脚本标签中提取数据
- vb.net - 无法根据数字值更新表字段
- javascript - 如何让 div 在溢出时弹出?
- javascript - jQuery - 变量外部选择器/函数 - 总和变量