add and remove div after click [closed]

Answer 1

I'm not at all sure what you are trying to do. There wasn't even an element with the ID "pop0" in your example, but I added it and hid it by default with $("#pop0").hide();:

http://jsfiddle.net/kjTBG/16/

HTML:

<a href='#'><div id="pop0" class="pop"></div></a>
<a href='#'><div id="pop1" class="pop"></div></a>
<a href='#'><div id="pop2" class="pop"></div></a>
<a href='#'><div id="pop3" class="pop"></div></a>

JS:

$("#pop0").hide(); // Initially hide #pop0 so it isn't visible.
$(".pop").bind('click', function(){
    $('.pop').show();
   $(this).hide();     
})

Please elaborate on what you are trying to do. Rephrase your question and use whole sentences please. Try to describe it more abstractly if that helps.

Answer 2

Like this?

fiddle

$(".pop").bind('click', function(){
    $('.pop').show();
    $(this).hide().prev().show();
})

Answer 3

This is what you are looking for: demo

<a href='#'><div id="pop0" class="pop"></div></a>
<a href='#'><div id="pop1" class="pop"></div></a>
<a href='#'><div id="pop2" class="pop"></div></a>
<a href='#'><div id="pop3" class="pop"></div></a>

$(".pop").bind('click', function(){
    $('.pop').show();
   $(this).hide();     
})

Answer 4

I think you're just trying to swap the IDs to change the colors.

In that case try this:

var id = "pop0";
$(".pop").bind('click', function(){
    var oldId = $(this).attr('id');
    $(this).attr('id', id);
    id = oldId;
});

Fiddle: http://jsfiddle.net/kjTBG/20/

Basically what it does is this:

Initially, the three DIVs have the IDs "pop1", "pop2" and "pop3".

Example 1: When you click on "pop1" first, its ID changes to "pop0". When you then click on "pop2", its ID changes to "pop1". And so on.

Example 2: When you click on "pop2" first, its ID changes to "pop0". When you then click on "pop1", its ID changes to "pop2". And so on.

It keeps track of the original ID of the last "pop" you clicked on and then swaps that out with the ID of the next "pop" you click on.

Answer 5

$("body").on('click', '.pop', function(){
    if($('.pop').length == 3) {
        $('.pop').eq(0).before('<a href="#"><div id="pop0" class="pop"></div></a>');
    }
    $('.pop').show();
   $(this).hide();     
});

Is this what you are looking for? http://jsfiddle.net/kjTBG/17/

Edit:

$("body").on('click', '.pop', function(){
    if($('.pop').length == 3) {
        $('.pop').last().after('<a href="#"><div id="pop0" class="pop"></div></a>');
    }
    $('.pop').show();
   $(this).hide();     
});

http://jsfiddle.net/kjTBG/24/