jQuery: Removing duplicate elements - temporarily

Question

I have a list of elements with a common class and want to hide all of the duplicates. I can achieve this. However, I have a "toggle" link which shows and hides the list of elements. When the toggle occurs I want the browser to "reset" or "forget" what has been marked as a duplicate, ready for the user to click filter again.

My Fiddle shows the filter working but I don't want to change every child DIV of #container into a visible element as line 19 is doing for example - this is occurring outside this code in my project already. To "forget" the element I need to use something like what's on line 18, although this doesn't seem to work.

Preferably, the "forgetting" would occur as soon as the element is hidden (line 7), so it is ready to appear again in a future instance of the filter. What would be the correct syntax?

EDIT: for a better idea of what I'm after:

1. Go to http://www.adaptworkbench.co.uk/

2. On the left hand side click on the "Securities" checkbox. You will see "TEST JOB" appear. Uncheck the box.

3. On the left hand side click on the "Secretarial" checkbox. You will see "TEST JOB" appear. Uncheck the box.

4. Click "Securities" again. After all is said and done "TEST JOB" will NOT appear but I want the browser to "forget" it was marked as "SEEN" and show it.

The point of this is so that a duplicate entry will not appear if two checkboxes are checked - if you tick both "Securities" and "Secretarial" you can see this is working, but I want it to FORGET right after hiding the duplicate so that "TEST JOB" will appear again when clicking just one checkbox afterwards.

Hope this makes sense!

Answer 1

UPDATED BASED ON REQUIREMENTS IN COMMENTS BELOW (last one was broke this isn't):

Basically using the same id for each job allows us to track the job, and we can assign multiple classes for check type of job. There are probably multiple was to do this, and probably depend more on how your actually displaying them, but this works.

http://jsfiddle.net/EVDQa/6/

HTML:

<div id="input">
    <form>
        <input type="checkbox" name="jobs" value="security">Security
        <br>
        <input type="checkbox" name="jobs" value="secretarial">Secretarial
    </form>
</div>
<div id="display">
    <div class="posting hidden security" id="12345">
         This is a test Security job. Id: 12345
    </div>
    <div class="posting hidden secretarial" id="12345">
         This is a test Secretarial job. Id: 12345
    </div>
</div>

CSS:

.posting {
    border: 2px solid #000000;
}
.hidden {
    display: none;
    visibility: hidden;
}
#input {
    float: left;
}
#display {
    margin-left: 100px;
    float: left;
}

JS:

$("#input form input").change(function () {
    var jobType = $(this).val();
    var jobIds = [];
    var id;

    function getJobs() {
        $(".posting." + jobType).each(function () {
            id = $(this).attr("id");
            if ($.inArray(id, jobIds) === -1) {
                jobIds.push(id);
                $(this).toggleClass("hidden");

                if ($(this).hasClass("hidden")) {
                    jobIds = jQuery.grep(jobIds, function (value) {
                        return value != id;
                    });
                }
            }
        });
    }

    $(".posting:not(.hidden, ." + jobType + ")").each(function () {
        id = $(this).attr("id");
        if ($.inArray(id, jobIds) === -1) {
            jobIds.push(id);
        }
    });

    //Toggle jobs
    getJobs();
    jobType = $(":checked").val();
    getJobs();
});

Answer 2

Once you've selected all of those elements, you could hide them by adding a special class that only they can have, like tempHidden or something. Then once you're ready to show them again, you can select all items that have that "special" class:

$('.tempHidden').hide();

and when you're ready to show them again

$('.tempHidden').show();

and whenever you need to select everything except the hidden items, you can use the .not() method:

$('.everything').not('.tempHidden');