How do I remove variable randomly using jquery?

Question

I'm trying to find a way to remove variable from certain div on the web using jquery. This does not involve using array. If I can do so with using fadeIn() or search() and remove() , that's even better.

var something = '#img' + count;

on the web, images will be added to div as time passes (using setTimeout ). Those images have been assigned to variable ( something ) and I need to find a way to remove it from certain div on the web. It can be hide, remove, whatever, it has to disappear from user's view randomly (both time and which image will disappear).

Thanks for help and your time in advance.

my function code:

var count = 0;

function foo() {
  var xPos = xPosition();
  var yPos = yPosition();
  var someTime;

  $("div").append('<img id="Img" ' + count + ' src = "img.png" style="top:' + yPos + 'px; left: ' + xPos + 'px; " />');
  var something = "#Img" + count;
  someTime = setTimeout('foo()', randInterval());
  $(something).hide();
  count++;

  if (timeRemaining == 0) {
    clearTimeout(someTime);
    return;
  }

Answer 1

Please, never ever append a number to an id and piece together numbered names of things. It is unmaintainable and bad. Use class .

Assign a purpose or functionality to an element or elements by adding a class name to them. If you want to add information to an element, that is great, use data- prefix on the attribute name and it is all legal. data-itemid is an example.

You can query for matching elements with var those = $('.that-class-name') , stored for reuse. From there you can access individual elements using those.eq(0) through those.eq(x.length - 1) . For example, if you somehow knew that the 3rd one needs to be removed, then those.eq(3).remove(); . If you want to pick through them and only select ones that match a condition, use those.filter(callback).remove() , where callback returns true if the element referred to by this should be removed. If you want to filter those with another selector, .filter will accept a selector too.

Is that what you meant?

Answer 2

Give all the images a class. You can then use $(".class").length() to get the number of images, pick a random number in this range, and delete that element with .eq() .

function addImage() {
    var xPos = xPosition();
    var yPos = yPosition();
    $("div").append($("<img>", {
        src: "img.png",
        "class": "imageclass",
        style: {
            top: yPos+"px",
            left: xPos+"px"
        }
    }));
    setTimeout(addImage, randInterval());
}
setTimeout(addImage, randInterval());

function removeImage() {
    var images = $(".imageclass");
    if (images.length) {
        var rand = Math.floor(Math.random() * images.length);
        images.eq(rand).remove();
    }
    setTimeout(removeImage, randInterval());
}
setTimeout(removeImage, randInterval());

In my code I'm using separate timers for adding and removing images. If you prefer, you could remove the setTimeout from removeImage() , and just call it from addImage so it will always remove an image whenever it's adding a new one.