CODEWITHSUNDEEP
javascriptjquery
user4085386
user4085386

Reputation:

How to remove all <div> images with a given url in jquery/javascript?

I want to remove all background images inside unnamed unclassified <div>s from a webpage using javascript by its url?

The actual html tag for these images is the following:

<div style="position:absolute;width:150px;height:150px;top:0px;
background:url(img-150x150.png) no-repeat left top;"></div>

What I am trying is the following:

$('*').filter(function () {
    return $(this).css('background-image') == 'url("img150x150.png")'
}).remove();

But this is not working.

Upvotes: 0

Views: 68

Answers (2)

Marko Mackic
Marko Mackic

Reputation: 2333

Well you can check if img-150x150.png exists in background-image string, because it contains url with absolute path to image..

$(document).ready(function() {
  //this is if you want to remove those divs
  $('body>div').filter(function() {

    return $(this).css("background-image").indexOf("img-150x150.png") != -1
  }).remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div style="width:150px;height:150px;top:0px;
background:url('img-150x150.png') no-repeat left top;"></div>

<div style="width:150px;height:150px;top:0px;
background:url('img-150x150.png') no-repeat left top;"></div>

<div style="width:150px;height:150px;top:0px;
background:url('img-150x150.png') no-repeat left top;"></div>

<div style="background:yellow;width:150px;height:150px;top:0px;"></div>
  </body>

$(document).ready(function() {
  //this is if you want to change background color of  those divs
  $('body>div').filter(function() {
    return $(this).css("background-image").indexOf("img-150x150.png") != -1
  }).each(function(){$(this).css("background","red");})
});
div{
margin:10px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div style="width:50px;height:50px;top:0px;
    background:url('img-150x150.png') no-repeat left top;"></div>

    <div style="width:50px;height:50px;top:0px;
    background:url('img-150x150.png') no-repeat left top;"></div>

    <div style="width:50px;height:50px;top:0px;
    background:url('img-150x150.png') no-repeat left top;"></div>

    <div style="background:yellow;width:50px;height:50px;top:0px;"></div>
  
  </body>

And since indexOf is not supported in IE 7,8 here is a polyfill:

Array.prototype.indexOf || (Array.prototype.indexOf = function(d, e) {
    var a;
    if (null == this) throw new TypeError('"this" is null or not defined');
    var c = Object(this),
        b = c.length >>> 0;
    if (0 === b) return -1;
    a = +e || 0;
    Infinity === Math.abs(a) && (a = 0);
    if (a >= b) return -1;
    for (a = Math.max(0 <= a ? a : b - Math.abs(a), 0); a < b;) {
        if (a in c && c[a] === d) return a;
        a++
    }
    return -1
});

Upvotes: 1

Mi-Creativity
Mi-Creativity

Reputation: 9654

You can try this:

jsFiddle

// loop through all divs
$('div').each(function() {
  // store the value of the style attribute in a variable
  var divStyle = $(this).attr('style');
  // remove the background part
  divStyle = divStyle.replace('background:url(img-150x150.png) no-repeat left top;', '');
  //inject the new and modified style attribute back
  $(this).attr('style', divStyle);
});
div{ width:70px; height:50px; display:inline-block; border:1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position:absolute;width:150px;height:150px;top:0px;
background:url(img-150x150.png) no-repeat left top;"></div>
<div style="position:absolute;width:150px;height:150px;top:0px;
background:url(img-150x150.png) no-repeat left top;"></div>

Now the style attribute of each of these divs is:

style="position:absolute;width:150px;height:150px;top:0px;"

Upvotes: 0

Related Questions