用类隐藏子级的父div

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!

寻找一些帮助，如果你知道怎么做可能并不困难。不幸的是，我是jQuery / JavaScript的新手，我不知道如何做到这一点，所以如果有人能指出我正确的方向，那就太棒了！

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.

我正在使用第三方Google地图组件的Joomla网站上工作。很酷的组件，但我想隐藏一个特定的标签。通常我只是用CSS隐藏这个元素，但由于这个特殊的div没有任何“ID”或“类”，我想不能直接用CSS来定位它。

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.

我注意到我想要隐藏的div的孩子，确实有一个独特的类，所以我正在寻找一个解决方案，通过使用孩子的类名，我可以隐藏它的父级。

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 "

然而，由于我的知识有限，我很挣扎，我不确定它是否与我正在使用的jQuery代码有关，或者因为我只是把它放在错误的地方或其他地方我做错了...（继续“

Uncaught TypeError: Cannot read property 'parent' of null

未捕获的TypeError：无法读取null的属性“parent”

")

“）

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" '

我正在寻找一种方法来隐藏'div class =“gm-style-iw”'上面的'div'

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

以下是Google地图组件的实例。 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)

我基本上试图隐藏在打开页面时说“Gabbon”的'文本气球'...（在底部的地图中）

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

任何人都可以指出我如何隐藏这个？

Many thanks in advance!

提前谢谢了！

1 个解决方案

#1

Uncaught TypeError: Cannot read property 'parent' of null

未捕获的TypeError：无法读取null的属性“parent”

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

发生这种情况是因为您对jQuery函数使用了短$符号。

In your case you need to use:

在您的情况下，您需要使用：

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

For more details see noconflict

有关更多详细信息，请参阅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.

在您的情况下，元素是在加载文档后创建的，因此您需要MutationObserver api来监听新元素的可用性。

Thanks to Mutation_events you can write:

感谢Mutation_events，你可以写：

<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>