Is there a way to remove all li elements from a ul list when the button is pressed repeatedly?

Question

Is there a way to remove all li elements from a ul list when the button is pressed repeatedly?

When I create a new list item through the DOM and press the button again without refreshing the page, the old elements are not removed. Instead, the new ones are added on top. Any suggestions would be appreciated!

Here is the code snippet for reference:

data.cast.forEach((actors)=>{
                const li = document.createElement('li');
                li.innerHTML = 
                `<li>
                   ${actors.actor}: ${ actors.character} 
                </li>`
                cast.append(li)
            })

javascript

Answer 1

Answer №1

In order to add the new, you must first remove the old:

var list = document.getElementById('list');

var items = {
  listItems: [{
    item: "Item01",
    description: "Description of Item01"
  }, {
    item: "Item02",
    description: "Description of Item02"
  }]
};

document.getElementById('refresh').addEventListener('click', e => {
  // Clear the current list
  list.innerHTML = '';
  // Add the new items
  items.listItems.forEach((item) => {
    const li = document.createElement('li');
    li.innerHTML = `${item.item}: ${ item.description}`;
    list.append(li);
  });
});

<ul id="list">
<li>Old item: Old description</li>
</ul>

<button id="refresh">Refresh List</button>

Answer 2

In order to add the new, you must first remove the old:

var list = document.getElementById('list');

var items = {
  listItems: [{
    item: "Item01",
    description: "Description of Item01"
  }, {
    item: "Item02",
    description: "Description of Item02"
  }]
};

document.getElementById('refresh').addEventListener('click', e => {
  // Clear the current list
  list.innerHTML = '';
  // Add the new items
  items.listItems.forEach((item) => {
    const li = document.createElement('li');
    li.innerHTML = `${item.item}: ${ item.description}`;
    list.append(li);
  });
});

<ul id="list">
<li>Old item: Old description</li>
</ul>

<button id="refresh">Refresh List</button>

Is there a way to remove all li elements from a ul list when the button is pressed repeatedly?

Answer №1

Similar questions

transferring data from a form with a binary image file to store in an SQL server

Having difficulty positioning two elements within a button using bootstrap

Can Ajax be utilized to call a PHP script that contains another Ajax function?

The customized message for parsley's minimum length is not being applied properly when passed as an option during binding

Storing data in cache and refreshing another object for a chart does not function properly

Parenting and Child Components: Keeping the State in Sync

Problem encountered when attempting to highlight error message after clicking the "Submit" button without choosing a date

Issue with Swiper js "autoheight" not resizing correctly for the height of the first slide upon page initialization

Pinia store encountering a Typescript Vue component issue: error message "The property 'testStore' does not exist on the 'CreateComponentPublicInstance' type."

Guide on converting HTML datetime picker datetime-local to moment format

The "a" HTML link element is stubbornly resisting being attached to an event listener

The dropdown on my website is malfunctioning

Error when utilizing the useLocation Hook: "The useLocation() function is only allowed within the scope of a <Router> component" in a React App

Confirm that the string is in the correct JavaScript Date format

Ways to duplicate the content of a div to the clipboard without the use of flash

What is the best way to disregard all pathNames and display my index.php file directly from the root of my website?

Troubleshooting CSS Animation Failure in Internet Explorer 11

Incorporating angularjs within a page loaded with jquery.load

React: Unexpected behavior when modifying a variable's state using post-increment

Looking to update table content dynamically using jQuery ajax?