I am trying to add and remove <li> with jqeury, the "add" function works but not the remove. When I click on the "remove" button it just disappears, Any idea why please?
Code: Select all
<h1 id="title">title</h1>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
<input type="text"></input>
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<script>
function add() {
var count = $('ul').children().length + 1;
var txt = "List element " + count;
var newli = $('<li></li>').text(txt);
$('ul').append(newli);
}
function remove() {
if ($('ul').children().length == 0) {
return;
}
$('li:last').remove('ul');
}
</script>
Thank you,