Question

我有一个脚本会添加一些带有复选框的文本，就像待办事项列表一样。

这很好用，我试图添加一个'删除'按钮来删除单个条目，但我无处可去，我尝试自己编写'删除'代码，但它似乎完全没用，任何帮助将不胜感激！

HTML：

       Enter What To Do<input id='userInput' size=60> <button onClick='userSubmit()'>Submit</button><BR><P>
       <div id='result'></div>
       <button onClick='userDelete()'>X</button>

JS：

<script type='text/javascript'>function userSubmit() {
var UI=document.getElementById('userInput').value;
document.getElementById('result').innerHTML+='<input type="checkbox"> '+UI+'<br>';}   </script>

    <script type='text/javascript'>function userDelete(){
    var UI=document.getElementById('result');
    document.getElementById('result').innerHTML-='' '+UI+';}</script>

在小提琴中更新

http://jsfiddle.net/64u4B/

Answer 1

我会做这样的事情：

function addItem() {
var value = document.getElementById('userInput').value,
    taskListContainer = document.getElementById('task-list');
var html = '<article id="task-item">' +
                '<input type="checkbox">' +
                 '<section class="task-content">' + value + '</section> <br />' +
                '<button class="delete-btn" title="Delete tasks">DELETE</button>' +
    '</article>';

taskListContainer.insertAdjacentHTML('beforeend', html);

}

var deleteItem = function(event){
    var isDeleteBtnClicked = event.target.className === 'delete-btn';

   if(isDeleteBtnClicked){
      var taskElement = event.target.parentNode;
      document.getElementById('task-list').removeChild(taskElement);
  }

}

document.getElementById('task-list').addEventListener('click', deleteItem);
document.getElementById('add-task').addEventListener('click', addItem);

检查此http://jsfiddle.net/64u4B/10/

Answer 2

很抱歉，我将此作为单独答案提供，但由于缺乏代表而无法发表评论。

你能为你的工作提供一个小小的帮助，这样我们都可以清楚地看到你在做什么吗？

编辑和记忆：有一个网站TodoMVC它提供了一个你想要实现的目标的香草JS示例。 Vanilla JS Todo

Answer 3

如果通过javascript动态创建“删除”按钮，则可能会变得复杂，

但只是删除功能应该像这样

function delete(id)
{
 var elem = document.getElementById('id');
element.parentNode.removeChild(element)
}

请注意，在删除元素之前，应该引用其父节点。

删除按钮以删除ID - Javascript

3 个答案: