CODEWITHSUNDEEP
javascriptjquerycssuserscripts
Barkat Ullah
Barkat Ullah

Reputation: 97

Userscripts to Remove a div by css

I want to remove a div by userscripts where only possible thing to differ the div is bacground image in inline css.

Suppose a div has the following CSS: (background-image:http://www.example.com/example.png)

Could anyone help me about that?

I have tried the following one but not working.

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

Upvotes: 2

Views: 189

Answers (1)

paolobasso
paolobasso

Reputation: 2018

Use:

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

Documentation: .each(), .css(), .remove().

WARNING!! checking ALL div will be a huge work, you should use a class like toCheck instead. So:

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

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

UPDATE:

Since your class toCheck is partial-variable you will need a more tricky script using Regular Expression. First you need to extend JQUERY selectors (tutorial) so for :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));
}

then use it with your variable class:

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

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

Upvotes: 2

Related Questions