Deleting items from the DOM using JavaScript

Question

Deleting items from the DOM using JavaScript

I am retrieving all the list elements from a menu in order to eliminate the ones that I do not want.

let prodMenu = document.getElementsByClassName("productMenu-category");
for (let i = 0; i < prodMenu.length; i++) {
    if(i > 0 && prodMenu[i].innerHTML == prodMenu[i-1].innerHTML){prodMenu[i].style.display = "none";}
}

This is my current approach, however, instead of hiding them, I want to actually remove them. It seems like what I retrieve is referred to as a "collection" which does not support functions for removing its items. I cannot use methods like "delete prodMenu[i]" or "prodMenu.delete()" or even "prodMenu.splice()" because they are not applicable to a "collection."

javascript arrays collections

Answer 1

Answer №1

When dealing with collections in JavaScript, it's important to understand that they simply hold the actual DOM nodes defined by the selector provided. This collection is known as an HTMLCollection, which is live and automatically updates when changes are made to the underlying document. It's crucial to be cautious when manipulating this collection directly. Instead, utilize specific methods like remove to interact with the elements within.

let prodMenu = document.getElementsByClassName("productMenu-category");
for (let i = 0; i < prodMenu.length; i++) {
  if (i > 0 && prodMenu[i].innerHTML == prodMenu[i - 1].innerHTML) {
    prodMenu[i].remove();
  }
}

Answer 2

When dealing with collections in JavaScript, it's important to understand that they simply hold the actual DOM nodes defined by the selector provided. This collection is known as an HTMLCollection, which is live and automatically updates when changes are made to the underlying document. It's crucial to be cautious when manipulating this collection directly. Instead, utilize specific methods like remove to interact with the elements within.

let prodMenu = document.getElementsByClassName("productMenu-category");
for (let i = 0; i < prodMenu.length; i++) {
  if (i > 0 && prodMenu[i].innerHTML == prodMenu[i - 1].innerHTML) {
    prodMenu[i].remove();
  }
}

Deleting items from the DOM using JavaScript

Answer №1

Similar questions

What is the purpose of encasing the routes within the <Switch> element in react-router, when they seem to function perfectly fine without it

Troubleshoot: Unable to send or receive messages in Socket.IO Chat

Choose all or none of the items from the list with a single click - v-list-item-group

Having trouble sending messages on the server?

Perform vector subtraction on two lists of vectors using numpy

The child component does not refresh when its state changes due to the useEffect function

Adjust the position of an anchor tag when clicked with a fixed header

The Google Maps v3 API is frustratingly only loading properly after a refresh, and the authentication process is

What is the best way to ensure an observable has been updated before proceeding with additional code execution?

Removing an element from an array within each subdocument using Mongoose

Tips on enhancing SauceLabs javascript queries in your selenium testing for faster speeds?

Jest does not recognize AnimationEvent as a defined element

Click once to change the element, but it will remain changed and will not revert back no matter how many times you

Requiring the specification of a particular generic Closure type

Creating multiple objects using a single object in JavaScript can be achieved by using the concept of object

Utilize Webpack to integrate redux-form as an external library

Creating a universal header for all webpages in Angular JS by dynamically adding elements using JavaScript DOM manipulation techniques

Ways to create a shorter upper line compared to the lower line (inside a div)

showcase fresh material using the jquery fancybox

Storing the Token from the AJAX Login API Call in JavaScript: Best Practices for Keeping Credentials Secure