如何在列表中添加刪除按鈕？
[英]How can I add delete button on list?
問題描述
嗨，我有開始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>
1 個解決方案
解決方案1
7 已采納 2016-07-20 12:16:55
<!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 添加的每個列表項添加刪除按鈕？
[英]How can I add a delete button for every list item added with javascript?
如何在每個列表項之前添加一個復選框，並在列表項之后添加一個刪除按鈕？
[英]how do I add a checkbox before every list Item, and a delete button after the list item?
我如何放置一個添加按鈕，用戶可以在 html 的選擇列表中添加他的選擇
[英]how can i put an add button where a user can add his choice in a select list in html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.