Question

我正在尝试从具有Chrome扩展程序的页面中删除以下div

HTML（删除）

<div class="base-popup js-base-popup"><div class="js-obscurity base-popup__obscurity"></div>
<div class="base-popup__indent"></div>
<div class="base-popup__wrap">
    <div class="base-popup__container clearfix base-popup__container -decor" style="width:500px;">


                <i class="s-icon -m -close base-popup__close js-close"></i>


        <div class="base-popup__content  js-content"><div><div class="s-text">Sample Text.
    <!-- close tag -->
    </p>
    <!-- close tag in translate  -->
</div></div></div>
    </div>

以下是我的内容脚本中的JS

 function removeElementsByClassName(names) {
        var els = document.getElementsByClassName(names),
            i, element;
        for (i = els.count - 1; i > 0; i -= 1) {
            element = els[i];
            element.parentElement.removeChild(element);
        }
    }

removeElementsByClassName('base-popup js-base-popup');

Answer 1

getElementsByClassName只接受单个类名称，但是你给它两个。由于您所显示的HTML只有一个元素，它包含您正在使用的两个类中的任何一个，如果这是您要删除的唯一元素，请选择一个：

removeElementsByClassName("base-popup");
// or
removeElementsByClassName("js-base-popup");

或者，您可以将querySelectorAll与CSS选择器一起使用：

function removeElementsBySelector(selector) {
    var els = document.querySelectorAll(selector),
        i, element;
    for (i = els.count - 1; i > 0; i -= 1) {
        element = els[i];
        element.parentElement.removeChild(element);
    }
}

然后，如果要删除 类的元素：

removeElementsBySelector('.base-popup, .js-base-popup');

或者，如果您只想删除包含两个类的单个元素：

removeElementsBySelector('.base-popup.js-base-popup');

由于这是Chrome扩展程序，因此您可以使用Array.from，forEach和Element#remove更简单地执行此操作：

function removeElementsBySelector(selector) { Array.from(document.querySelectorAll(selector)).forEach(element => { element.remove(); }); }

Answer 2

你的javascript完全错误。正确的方式：

 function removeElementsByClassName(names){
    names=names.split(" ");//you just get elems by one class so you need to split it into multiple operations
    for(var a=1;a<names.length;a++){//ability to remove multiple classes
     removeElementsByClassName(names[a]);
     }
    var els = document.getElementsByClassName(names[0]);
    for (var i =0; i<els.length ; i++) { // its length not count
        var element = els[i];
        element.parentElement.removeChild(element);
    }
 }

removeElementsByClassName('base-popup js-base-popup');

这将删除包含其中一个类的所有元素，如果您还需要其他解决方案。

从chrome扩展中的html中删除div

2 个答案: