リストに削除ボタンを追加するにはどうしたらいいですか？

こんにちは私はhtmljavasicriptのためのプロジェクトを持っていますが、私は何かを試しています。リストの削除ボタンを追加したいが、各行にどのように削除ボタンを追加できるのかわからない？リストに削除ボタンを追加するにはどうしたらいいですか？

<!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>

出典

2016-07-20 Hafsa Elif Özçiftci

<!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>

出典

2016-07-20 12:16:55

ご協力いただきありがとうございます –

リストに削除ボタンを追加するにはどうしたらいいですか？

答えて

関連する問題