您好，我有一个开始于 html javasicript 的项目，但我正在尝试一些事情。
我想添加列表删除按钮，但不知道如何为每一行添加删除按钮？
<!DOCTYPE html>
<html lang="en">
<body>
<header><h1></h1></header>
<section>
<form action="#" method="post">
<div>
<label for="newitem">Add item</label>
<input type="text" name="newitem" id="newitem"
placeholder="new item" />
<input type="submit" value="Add" />
</div>
</form>
<ul id="todolist"></ul>
</section>
<script>
(function(){
var todo = document.querySelector( '#todolist' ),
form = document.querySelector( 'form' ),
field = document.querySelector( '#newitem' );
form.addEventListener( 'submit', function( ev ) {
var text = field.value;
if ( text !== '' ) {
todo.innerHTML += '<li>' + text + '</li>';
field.value = '';
//field.focus();
}
ev.preventDefault();
}, false);
})();
</script>
</body>
</html>最佳答案
<!DOCTYPE html>
<html lang="en">
<body>
<header><h1></h1></header>
<section>
<form action="#" method="post">
<div>
<label for="newitem">Add item</label>
<input type="text" name="newitem" id="newitem"
placeholder="new item" />
<input type="submit" value="Add" />
</div>
</form>
<ul id="todolist"></ul>
</section>
<script>
(function(){
var todo = document.querySelector( '#todolist' ),
form = document.querySelector( 'form' ),
field = document.querySelector( '#newitem' );
form.addEventListener( 'submit', function( ev ) {
var text = field.value;
if ( text !== '' ) {
todo.innerHTML += '<li>' + text + ' <button onclick="Delete(this);">Delete</button> </li>';
field.value = '';
//field.focus();
}
ev.preventDefault();
}, false);
})();
function Delete(currentEl){
currentEl.parentNode.parentNode.removeChild(currentEl.parentNode);
}
</script>
</body>
</html>关于javascript - 如何在列表中添加删除按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38480664/