javascript - 如何创建一个可以通过按钮添加和删除输入的列表?
问题描述
我有个主意。为此,我需要一个这样的列表:
所以主要的想法是有一个加号和一个减号按钮。当用户按下加号按钮时,会添加另一个输入。按下每个输入旁边的减号按钮时,应删除相关输入。
所以我在这里开始了这个,但我不是很喜欢它,功能还没有给出。我该如何以聪明的方式处理这个问题?身份证有问题吗?我的意思是我可以复制一行或插入它(使用 JS),但我如何才能在一个映射(使用 JS)中获取所有输入的值?很多问题..
.out-task {
display: flex;
margin-bottom: 8px;
}
.delete-task-button {
margin-left: 6px;
background: red;
}
.button {
width: 30px;
height: 30px;
display: block;
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.add-task-button {
background: green;
}
<div class="wrapper">
<label>Tasks</label>
<div id="tasks-wrapper">
<div class="out-task">
<input type="text" id="task" name="task" value="">
<span class="delete-task-button button">-</span>
</div>
</div>
<span class="add-task-button button">+</span>
</div>
谢谢你的协助!!!
解决方案
正如我批评了每个人一样,我让你对我的代码做同样的事情:
const ListTasks = document.querySelector('#wrapper > div')
, PosInsertTask = document.querySelector('#wrapper > div > span.add-task-button')
, taskWrapper = document.querySelector('#template > div')
;
ListTasks.onclick=e=>
{
if (e.target.classList.contains('add-task-button'))
{
let newTask = taskWrapper.cloneNode(true)
ListTasks.insertBefore(newTask, PosInsertTask)
}
else if (e.target.classList.contains('delete-task-button'))
{
ListTasks.removeChild(e.target.closest('.out-task'))
}
}
.out-task {
display : flex;
margin-bottom: 8px;
}
.delete-task-button {
margin-left: 6px;
background : red;
}
.button {
width : 30px;
height : 30px;
display : block;
border-radius : 50%;
color : white;
display : flex;
justify-content: center;
align-items : center;
cursor : pointer;
font-weight : bold;
}
#wrapper { display: inline-block; border: 1px solid grey; padding:.8em;}
#wrapper h4 { text-align: center; }
.add-task-button {
background: green;
margin: auto;
}
#template { display: none;}
<div id="wrapper">
<h4>Tasks</h4>
<div>
<div class="out-task">
<input type="text" value="">
<span class="delete-task-button button">-</span>
</div>
<span class="add-task-button button">+</span>
</div>
</div>
<div id="template">
<div class="out-task">
<input type="text" value="">
<span class="delete-task-button button">-</span>
</div>
</div>
推荐阅读
- regex - Sed 正则表达式 ".*?=" 字符串不能替换正确的字符串
- java - 如果在 JAX-RS 资源中使用单例 javax.ws.rs.client.Client 线程安全吗?
- php - 如何将关联数组与索引数组合并
- clang - Clang 使用 fuzzer 参数显示编译器错误
- node.js - 编辑组件 html 时 Angular CLI 不会重新加载?
- algorithm - 无法计算以下算法的时间复杂度
- python - 最后一行代码是什么意思,x1[ x1[:,1]>3 ]
- c# - 如何在 C# 中正确处理第三方对象(TelegramBotClient)
- excel - 合并重复记录,然后使用 vlookup 从另一张表中提取数据
- ios - ViewControllers 之间的延迟自定义转换