Question

After populating some divs according to users’ selections I want to give them the option to clear the data and start all over.

To fill in the divs with an image and a caption I’m using:

$('#options img').click(function () {
    var imageName = $(this).attr('alt');
    var chopped = imageName.split('.');
    $('#titleImage').empty();
    $('#titleImage')
        .prepend(chopped[0]);
    $img = $(this);
    $('#_targetDiv img').attr('src', $img.attr('src'));
})

And the to clear all divs:

$('#reset').click(function () {
    $('div[id^=title], div[id$=_targetDiv]').empty();
});

But after clicking ‘reset’ to start over and choosing an image from the menu the target div remains empty, though the title caption does appear. Why does that happen, and how can I correct it?

Thanks in advance.

Answer 1

I’ve replicated this problem here: http://jsfiddle.net/nrabinowitz/tEkQb/1/

If your HTML is like my HTML, the problem is that you’re deleting the element you are trying to update when you click. When you start out, you’ve got something like:

<div id="_targetDiv">
    <img src="default.jpg">
</div>

But after you click Reset, you call .empty() on the _targetDiv element, so all you have is

<div id="_targetDiv"></div>

Assuming that your img tag has a default, maybe a 1×1 blank gif (oh man, when was the last time I used one of those?), you should just be resetting the src to the default, not deleting the element.