我如何在列表中添加删除按钮?(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>Hi I have project for beginning for html javasicript but I trying something. I want to add list delete button but ı don't know how can I add a delete button for each line ?
<!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><!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>
更多推荐
发布评论