Javascript 如何隐藏使用外部代码插入到页面的元素

我想隐藏使用外部应用程序插入/注入我的Shopify商店的元素。大约一秒钟后，当所有内容都在站点上加载完毕，并且有一个名为“hidethis”的类和一堆其他元素后，它就会出现

这不起作用，我不知道还有什么可以尝试

$(".hidethis").hide();

我正试图根据用户的位置以以下方式隐藏此元素：

 jQuery.ajax( {
  url: '//api.ipstack.com/check?access_key=xxx&fields=country_code',
  type: 'POST',
  dataType: 'jsonp',
  success: function(location) {



    if (location.country_code === 'EE') {


  $(function() {
  // if geolocation suggest you need to hide, execute this as soon as possible
  var sheet = window.document.styleSheets[0];
  sheet.insertRule('.cart__options { display:none; }', sheet.cssRules.length);




})

  } 
 }
} );

最佳解决方案：CSS

.hidethis { display:none }

如果这是不可能的，你需要JS

  var sheet = window.document.styleSheets[0];
  sheet.insertRule('.hidethis { display:none; }', sheet.cssRules.length);

$（函数（）{
//如果地理位置显示您需要隐藏，请尽快执行此操作
var sheet=window.document.styleSheets[0]；
insertRule（'.hidethis{display:none；}'，sheet.cssRules.length）；
//测试代码-在页面中插入上述代码时将其删除
setTimeout（函数（）{$（“#容器”）.append（'Hide this'）；}，1000）；
})

---

下面是一个如何添加事件的示例：

与jQuery

.on

相当的函数

您不必添加事件处理程序，只需将其隐藏即可

subscribeEvent(".feed", "click", ".feed-item", function (event) { /* here comes code of click-event*/ });

整个过程与MutationObserver配合使用：

// Options for the observer (which mutations to observe)
let config = { attributes: false, childList: true, subtree: true };

// Create an observer instance linked to the callback function
let observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(nodeToObserve, config);

其中回调：

// Callback function to execute when mutations are observed
let callback:MutationCallback = function (
    mutationsList: MutationRecord[], 
    observer: MutationObserver)
{
    for (let mutation of mutationsList)
    {
        // console.log("mutation.type", mutation.type);
        // console.log("mutation", mutation);

        if (mutation.type == 'childList')
        {
            for (let i = 0; i < mutation.addedNodes.length; ++i)
            {
                let thisNode: Node = mutation.addedNodes[i];
                allDescendants(thisNode); // here you do something with it
            } // Next i 

        } // End if (mutation.type == 'childList') 
        // else if (mutation.type == 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.');

    } // Next mutation 

}; // End Function callback 

//观察到突变时要执行的回调函数
let callback:MutationCallback=函数(
突变列表：突变记录[]，
观察者：变异（观察者）
{
for（让突变列表突变）
{
//log（“mutation.type”，mutation.type）；
//log（“突变”，突变）；
if（mutation.type=='childList'）
{
for（设i=0；i

1：首先，在浏览器中检查并找到元素

---

2：使用$（document）.ready（）并隐藏该元素

您的问题实际上不是外部应用程序添加的元素，问题是当您执行隐藏元素的代码时，该元素还不在DOM上。因为该元素是在所有JavaScript代码都已执行之后添加的

因此，您必须在添加元素后执行代码

以下是一个简单的示例，参考MDN中的示例：

//选择将观察到突变的节点
const targetNode=document.getElementById（'some-id'）；
//观察者选项（要观察哪些突变）
const config={childList:true，子树：true}；
//观察到突变时执行的回调函数
常量回调=函数（mutationsList，observer）{
for（让突变列表突变）{
if（mutation.type==='childList'）{
document.querySelector（'.hide'）.style.display='none'；
}
}
};
//创建链接到回调函数的观察者实例
const observer=新的MutationObserver（回调）；
//开始观察目标节点是否存在已配置的突变
observer.observe（targetNode，config）；
//添加一个超时，以模拟在执行所有代码后正在执行的JavaScript。
设置超时（（）=>{
document.getElementById（'some-id'）。innerHTML='Hello world'；
}, 1000);

我们能看到添加元素的完整标记吗？主元素有一个名为“hidethis”的类。我认为其他元素不相关。也许有一种方法可以使函数检查更改或不断扫描页面以查找新元素。当我从开发人员视图编辑CSS时，我能够隐藏该元素。不确定为什么我会被否决。你复制我的示例占用了我太多的测试代码。你只是nt

success:function（location）{if（location.country_code=='EE'）{var sheet=window.document.styleSheets[0]；sheet.insertRule（'.hidethis{display:none；}'，sheet.cssRules.length）；}

如果第二个代码不起作用但元素短暂出现，您也可以将其反转并显示出来。这是一个解决方案，但不是理想的预期结果。我不想对每个人都隐藏它。我正在检查地理位置，并试图根据用户的位置将其隐藏。我似乎收到了以下错误-未捕获的DomeException:未能从“CSSStyleSheet”读取“cssRules”属性：无法访问规则"。我可能在尝试将其插入代码时弄糟了。您可能需要在页面顶部添加样式表。我没有测试是否有样式表。请更新问题。我无法在未格式化的注释中读取代码未捕获类型错误：未能在“MutationObserver”上执行“observe”：参数1不是“Node”类型。是否尝试获取.hidethis元素将位于何处的父元素？您是否使用jQuery获取元素（jQuery不返回节点元素，您必须执行此$（选择器）[0]）？很抱歉，这超出了我的理解范围

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = { childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            document.querySelector('.hide').style.display = 'none';
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Add a timeout to simulate JavaScript being executed after all your code was executed.
setTimeout(() => {
    document.getElementById('some-id').innerHTML = '<span class="hide">Hello world</span>';
}, 1000);