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" placeholder="new item" /> <input type="submit" value="Add" /> </div> </form> <ul></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 Answer
<!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" placeholder="new item" /> <input type="submit" value="Add" /> </div> </form> <ul></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>
