4

Hello I have a simple unordered list and I would like to remove the last item on click of a button. I read somewhere that pop(); will do this but I am having trouble getting it working.

Here is what I have so far: 

<button id="remove">remove item</button>

<ul id="list">
    <li><input type="text"></li>
    <li><input type="text"></li>
    <li><input type="text"></li>
    <li><input type="text"></li>
    <li><input type="text"></li>
</ul>

var listItems = document.getElementById("list").getElementsByTagName("li");
var removeButton = document.getElementById("remove");

removeButton.addEventListener("click", removeItem);

function removeItem() {
    listItems.pop();
}

Here is the error I'm getting:

Uncaught TypeError: listItems.pop is not a function at HTMLButtonElement.removeItem

Which is weird because when I type listItems in the console I am getting the correct array:

listItems (7) [li, li, li, li, li, li, li]

jsfiddle

Anyone have any suggestions? I dont need to use .pop() any method that works will be fine

cup_of
  • 6,397
  • 9
  • 47
  • 94

2 Answers2

4

pop is an array function. You'll have to remove the list item like this: 

function removeItem() {
    var last = listItems[listItems.length - 1];
    last.parentNode.removeChild(last);
}

Note 1: We don't need to decrement listItems.length because it's a live HTMLCollection (returned by getElementsByTagName) that reflects the DOM (if an element is removed from the DOM then it gets automatically removed from the collection).

Note 2: You may want to check if the collection is empty before attempting to remove the last item (which won't exist if it's empty). Check the example bellow to see how.

Example:

var listItems = document.getElementById("list").getElementsByTagName("li");
var removeButton = document.getElementById("remove");

removeButton.addEventListener("click", removeItem);

function removeItem() {
    if(listItems.length === 0) return;           // if there is no items in listItems then quit the function (don't attempt to remove what doesn't exist)

    var last = listItems[listItems.length - 1];
    last.parentNode.removeChild(last);
}
<button id="remove">remove item</button>

<ul id="list">
    <li><input type="text"></li>
    <li><input type="text"></li>
    <li><input type="text"></li>
    <li><input type="text"></li>
    <li><input type="text"></li>
</ul>
ibrahim mahrir
  • 31,174
  • 5
  • 48
  • 73
2

The function getElementsByTagName returns an HTMLCollection which isn't an array.

See: https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

<button id="remove">remove item</button>

<ul id="list">
    <li><input type="text">1</li>
    <li><input type="text">2</li>
    <li><input type="text">3</li>
    <li><input type="text">4</li>
    <li><input type="text">5</li>
</ul>


<script>


var removeButton = document.getElementById("remove");

removeButton.addEventListener("click", removeItem);

function removeItem() {
    var list=document.getElementById("list");
    var listItems = list.getElementsByTagName("li");

    var last=listItems[listItems.length-1];
    list.removeChild(last);
}

</script>
Alexander Higgins
  • 6,765
  • 1
  • 23
  • 41