javascript - 通过 css 删除 div 的用户脚本

Question

我想通过用户脚本删除一个 div，其中唯一可能不同的 div 是内联 css 中的免费图像。

假设一个 div 有以下 CSS: (背景图像:http://www.example.com/example.png)

有人可以帮我解决这个问题吗？

我已经尝试过以下一种但不起作用。

var badDivs = $("div div:contains('background-image')");
badDivs.remove ();

Answer 1

用途:

$("div").each(function() {
  if ($(this).css("background-image") != 'none') {
    $(this).remove();
  }
});

文档:.each() , .css() , .remove() .

警告!!检查所有 div 将是一项艰巨的工作，您应该使用像 toCheck 这样的类。所以:

$(".toCheck").each(function() {
  if ($(this).css("background-image") != 'none') {
    $(this).remove();
  }
});

工作中DEMO .

$(".toCheck").each(function() {
  if ($(this).css("background-image") != 'none') {
    $(this).remove();
  }
});

div {
  border:1px solid #000;
}

.toCheck {
  width: 100px;
  height: 100px;
}

#withImage {
  background-image: url("http://www.placehold.it/100/100");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="toCheck" id="withImage">
  Div to check with an image
</div>

<div class="toCheck">
  Div to check without an image
</div>

<div>
  Normal div
</div>

更新:

由于您的类 toCheck 是部分变量，因此您将需要一个更棘手的脚本，使用 Regular Expression 。首先，您需要扩展 JQUERY 选择器 ( tutorial )，因此对于 :regex :

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

然后将其与您的变量类一起使用:

$("div:regex(class, profile_view_img_+[0-9]*)").each(function() {
  if ($(this).css("background-image") != 'none') {
    $(this).remove();
  }
});

已更新DEMO .

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

$("div:regex(class, profile_view_img_+[0-9]*)").each(function() {
  if ($(this).css("background-image") != 'none') {
    $(this).remove();
  }
});

div {
  border:1px solid #000;
}

.toCheck {
  width: 100px;
  height: 100px;
}

#withImage {
  background-image: url("http://www.placehold.it/100/100");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="profile_view_img_22222222" id="withImage">
  Div to check with an image
</div>

<div class="profile_view_img_1111111">
  Div to check without an image
</div>

<div>
  Normal div
</div>