Question

I have a 3X3 box and currently I have it so that when you hover over any one of the squares the background turns blue and then when you hover out the box reverts back to empty. I also have it so that when any of the boxes are clicked an image appears. What I am trying to accomplish now is to make it so that when the box is clicked the image will appear and when that same box is clicked again the image will disappear and so on using Jquery.

Here is what I have:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $('.divs').hover(function () {
                $(this).css("background-color", "#0000EE");
                console.log('hover');

            }, function () {
                $(this).css("background-color", "");
                console.log('hoverout');
            });

            $('.divs').click(function () {
                $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");
                console.log('divclicked');
            });
        });

Answer 1

Just check if there is an image there already

var $img = $("img", this);
if ($img.length > 0)
    $img.remove();
else
    $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");

If you don’t want to remove the image, you just toggle the visibility

var $img = $("img", this);
if ($img.length > 0) {
    $img.toggle();
} else {
    $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");

}