How Can I Add Delete Button on List?
Hi I Have Project for Beginning for Html Javasicript but I Trying Something. I Want to Add List Delete Button but I Don't Know How Can I Add a Delete Button...
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>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" 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>James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
