Question

我有个主意。为此，我需要像这样的抽奖清单：

所以主要思想是要有一个加号和一个减号按钮。当用户按下加号按钮时，将添加另一个输入。按下每个输入旁边的减号按钮时，应删除相关的输入。

所以我从这里开始，但是我不是很满意，并且还没有给出功能。我该如何聪明地应对呢？身份证号有问题吗？我的意思是我可以复制一行或将其插入（使用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>

感谢您的帮助！

Answer 1

正如我批评每个人一样，我让您对我的代码执行相同的操作：

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>

Answer 2

一个选择是克隆它并将其附加到列表中。这使您可以在HTML级别处理所有属性。您仍然需要进行一些小的调整才能将其放置在所需的位置，但这只是一个纯js示例：

const taskWrapper = document.getElementById('tasks-wrapper');

function addTask() {
  const lastInput = document.querySelector('.out-task:last-of-type');

  taskWrapper.appendChild(lastInput.cloneNode(true));
}

function removeTask(task) {
  taskWrapper.removeChild(task.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;
}

.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="">
      <button class="delete-task-button button" onclick="removeTask(this)">-</button>
    </div>
  </div>
  <button class="add-task-button button" onclick="addTask()">+</button>
</div>

如何创建一个列表，可以在其中通过按钮添加和删除输入？

2 个答案: