0

I have a html page that is structured as following:

<html>
    <div class="container-xl">
        <div class="row">
            <div class "element_i_want_to_access">
                ...
            </div>
        </div>
    </div>
</html>

I would like to remove this element, so my approach was as following:

parent_element= document.getElementsByClassName("container-xl").getElementsByClassName('row');
element = document.getElementsByClassName("element_i_want_to_access")
parent_element.removeChild(element );

However, when retrieving the parent element I get the error document.getElementsByClassName(...).getElementsByClassName is not a function. Is there a particular reason for this? What would the correct syntax look like?

dmmpie
  • 365
  • 2
  • 14
  • `getElementsByClassName` returns an `HTMLCollection`. They don't have a `getElementsByClassName` method. (Elements within the collection do, but not the collection.) See the linked question's answers. But if you're trying to get all `.row` elements within `.container-xl` elements, consider `querySelectorAll`, which accepts any CSS selector and returns a `NodeList` of matching elements: `document.querySelectorAll(".container-xl .row")`. – T.J. Crowder Nov 08 '21 at 17:14
  • here you can use this: var element_to_remove= document.getElementsByClassName('element_i_want_to_access'); for(var i=0; i< element_to_remove.length;){ element_to_remove.item(i).parentNode.removeChild(element_to_remove.item(i)); } – Angel Astorga Nov 08 '21 at 18:02

0 Answers0