最好的方法来添加删除按钮在做清单

我创建一个与香草JS做清单。我最好想让我的添加，删除功能分开，以保持一切整齐。最好的方法来添加删除按钮在做清单

我的问题是，如果我创建一个删除按钮，当我添加一个做我不知道如何引用删除按钮。

的jsfiddle：https://jsfiddle.net/ped1j6kf/11/

任何想法？

感谢

HTML

<body> 
    <!-- Main --> 
    <div id="main"></div> 
    <!-- Add --> 
    <input id="to-do-value" type="text" placeholder="Enter to do"> 
    <button id="add">Add</button> 
<script type="text/javascript" src="main.js"></script> 
</body>

// To do 

var toDo = { 
    cacheDom: function() { 
     this.toDo = ['test']; 
     this.main = document.getElementById('main'); 
     this.add = document.getElementById('add'); 
     this.toDoValue = document.getElementById('to-do-value'); 
    }, 
    init: function() { 
     this.cacheDom(); 
     this.bindEvents(); 
     this.displayToDos(); 
    }, 
    bindEvents() { 
     this.add.addEventListener("click", this.addToDo.bind(this)); 
    }, 
    displayToDos: function() { 
     var html = '<ul>'; 
     for(i=0; i < this.toDo.length; i++) { 
      html += '<li>' + this.toDo[i] + '</li>' + '<button>delete</button>'; 
     } 
     html += '</ul>'; 

     this.main.innerHTML = html; 
    }, 
    addToDo(){ 
     var toDoValue = this.toDoValue.value; 
     this.toDo.push(toDoValue); 
     this.displayToDos(); 
    }, 
    deleteToDo() { 
     console.log("make this delete button work"); 
    } 
} 

toDo.init();

来源

2017-06-19 Joe Consterdine

有了一些细微的变化，你可以把它工作，你有现在的方式。

其中一个变化是，理论上你可以有多个名称相同的项目（出于某种原因），将待办事项作为对象存储并将其保存在待办事项列表中标识符，像这样：

addToDo(text){ 
    this.toDo.push({ id: this._id++, text: text}); 
    this.displayToDos(); 
}

这确实需要一些其他小的变化，但它直接提供引用onClick事件的可能性，这样的：

displayToDos: function() { 
    var html = '<ul>'; 
    for(i=0; i < this.toDo.length; i++) { 
     html += '<li>' + this.toDo[i].text + '</li>' + '<button onClick="toDo.deleteToDo(' + this.toDo[i].id + ')">delete</button>'; 
    } 
    html += '</ul>'; 

    this.main.innerHTML = html; 
}

你现在有两个文本是在待办事项列表中显示为可以引用的Id CED当你想删除这些数据

然后删除功能是这样的

deleteToDo(id) { 
    for (var i = 0; i < this.toDo.length; i++) { 
    if (this.toDo[i].id === id) { 
     // removes 1 item from the array at position i 
     this.toDo.splice(i, 1); 
     break; 
    } 
    } 
    this.displayToDos(); 
}

var toDo = { 
 
    _id: 0, 
 
    cacheDom: function() { 
 
     this.toDo = []; 
 
     this.main = document.getElementById('main'); 
 
     this.add = document.getElementById('add'); 
 
     this.toDoValue = document.getElementById('to-do-value'); 
 
    }, 
 
    init: function() { 
 
     // must run first 
 
     this.cacheDom(); 
 
     this.bindEvents(); 
 
     // now it can also allow for adding 
 
     this.addToDo('test'); 
 
     this.displayToDos(); 
 
    }, 
 
    bindEvents() { 
 
     this.add.addEventListener("click",() => this.addToDo(this.toDoValue.value)); 
 
    }, 
 
    displayToDos: function() { 
 
     var html = '<ul>'; 
 
     for(i=0; i < this.toDo.length; i++) { 
 
      html += '<li>' + this.toDo[i].text + '</li>' + '<button onClick="toDo.deleteToDo(' + this.toDo[i].id + ')">delete</button>'; 
 
     } 
 
     html += '</ul>'; 
 

 
     this.main.innerHTML = html; 
 
    }, 
 
    addToDo(text){ 
 
     var toDoValue = text; 
 
     this.toDo.push({ id: this._id++, text: toDoValue}); 
 
     this.displayToDos(); 
 
    }, 
 
    deleteToDo(id) { 
 
     for (var i = 0; i < this.toDo.length; i++) { 
 
     if (this.toDo[i].id === id) { 
 
      this.toDo.splice(i, 1); 
 
      break; 
 
     } 
 
     } 
 
     this.displayToDos(); 
 
    } 
 
} 
 

 
toDo.init();

<body> 
 
    <!-- Main --> 
 
    <div id="main"></div> 
 
    <!-- Add --> 
 
    <input id="to-do-value" type="text" placeholder="Enter to do"> 
 
    <button id="add">Add</button> 
 
<script type="text/javascript" src="main.js"></script> 
 
</body>

来源

2017-06-19 16:35:32 Icepickle

我假设你要这样，如果有人点击它，你要执行删除操作引用删除按钮。最简单的方法是： -

html += '<li>' + this.toDo[i] + '<button onclick="deleteSomething(this)">delete</button></li>';

请注意，按钮元素现在在li下。

然后在deleteSomething功能你得到父元素，并将其删除： -

function deleteSomething(el){ 
    val = el.value; 
    i = this.toDo.indexOf(val); 
    if (i > -1) { 
     array.splice(i, 1); 
    } 
    el.parentElement.remove(); 

}

来源

2017-06-19 16:25:35 Max08

他重建每个添加，只删除会在HTML的项目清单导致他们在每个新项目添加后重新出现 – Icepickle

@Ippickle很好的接收，我添加了代码以从列表中删除该元素。这只是一个粗略的代码来演示如何完成。其他条件或声明可按要求添加。 – Max08

最好的方法来添加删除按钮在做清单

回答

相关问题