Hide parent div of child with class

Question

Looking for some help with something that is probably not that difficult if you know how. Unfortunately though, I'm completely new to jQuery/JavaScript and I have no idea how to do this, so if someone could point me in the right direction, that would be great!

I'm working on a Joomla website with a 3rd party Google Maps component. Cool component, but there's 1 particular label I want to hide. Normally I'd simply hide this element with CSS, but since this particular div doesn't have any "ID" or "Class" I can't directly target it with CSS, i think.

I noticed the child of the div I'm trying to hide, does have a unique class, so I'm looking for a solution where by using the child's class-name, I can hide it's parent.

I figured something like this would do the trick:

$('.gm-style-iw').parent().hide();

However, with my limited knowledge I struggle and I'm not sure if it's related to the jQuery code I'm using, or because I'm simply putting it in the wrong place or something else I'm doing wrong... (Keep getting "

Uncaught TypeError: Cannot read property 'parent' of null

")

Bit of background. This is more or less how the particular part of the code looks like;

<div style="cursor: default; position: absolute; left: 234px; top: 86px; z-index: 86;">
    <div class="gm-style-iw" style="top: 9px; position: absolute;">

I'm looking for a way to hide the 'div' above 'div class="gm-style-iw" '

Here's a live example of the Google Maps component. http://83.84.140.23:8888/joomla/index.php/contact

I'm basically trying to hide the 'text balloon' that states "Gabbon" on opening the page... (In the map at the bottom)

Anyone could point me in the right direction on how to hide this?

Many thanks in advance!

Answer 1

Uncaught TypeError: Cannot read property 'parent' of null

This happens because you use the short $ sign for jQuery functions.

In your case you need to use:

jQuery('.gm-style-iw').parent().hide();

For more details see noconflict

In your case, the element is created after the document is loaded, so you need the MutationObserver api to listen for availabilityof the new element.

Thanks to Mutation_events you can write:

<script>
    jQuery('#map').on('DOMNodeInserted', '.gm-style-iw', function(e) {
        jQuery('.gm-style-iw').parent().hide();
    })
</script>

Moreover, referring to this article or others a different approach is:

<script>
(function(win){
    'use strict';

    var listeners = [],
            doc = win.document,
            MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
            observer;

    function ready(selector, fn){
        // Store the selector and callback to be monitored
        listeners.push({
            selector: selector,
            fn: fn
        });
        if(!observer){
            // Watch for changes in the document
            observer = new MutationObserver(check);
            observer.observe(doc.documentElement, {
                childList: true,
                subtree: true
            });
        }
        // Check if the element is currently in the DOM
        check();
    }

    function check(){
        // Check the DOM for elements matching a stored selector
        for(var i = 0, len = listeners.length, listener, elements; i < len; i++){
            listener = listeners[i];
            // Query for elements matching the specified selector
            elements = doc.querySelectorAll(listener.selector);
            for(var j = 0, jLen = elements.length, element; j < jLen; j++){
                element = elements[j];
                // Make sure the callback isn't invoked with the
                // same element more than once
                if(!element.ready){
                    element.ready = true;
                    // Invoke the callback with the element
                    listener.fn.call(element, element);
                }
            }
        }
    }

    // Expose `ready`
    win.ready = ready;

})(this);

ready('.gm-style-iw', function(element) {
    this.parentNode.style.display = 'none';
}) </script>