jQuery selector syntax question

Question

Here is my html:

<form>
    <dl>
        <dt>&nbsp;</dt>
        <dd><input type="hidden"></dd>

        <dt>Dont hide this one</dt>
        <dd><input type="text"></dd>
    </dl>
</form>

I'm using jQuery to hide the dt/dd elements where the input type is hidden with this code:

$("input[type=hidden]").each(function() {
    $(this).parent().hide().prev().hide();
});

But I also only want to apply this to dts where the text is  . How can I do this sort of select?

Update: Maybe I need to clarify: A few people have posted answers where it hides the dd before checking if the content of the dt is also  . Both conditions must be true before hiding both the dt and dd.

Final Solution: Here's what I ended up with:

$('input[type=hidden]').filter(function() {
    return $(this).closest('dd').prev('dt').html() === ' ';
}).each(function() {
    $(this).closest('dd').hide()
           .prev('dt').hide();
});

Answer 1

Use the contains selector:

$("dt:contains(' ')").hide();

Answer 2

$("input[type=hidden]").each(function() {
    $(this).closest('dd').hide()
           .prev('dt').hide();
});

This code finds the closest parent of the input with tag dd, hides it, then looks for a dt sibling and hides it as well.

Answer 3

$("input[type=hidden]").filter(function() {
    return $(this).parent().prev('dt').html() === " ";
}).each(function() {
    $(this).parent().hide().prev().hide();
});

This will not select <dt>foo&nbsp;bar</dt>

which contains(' ') would.

More concisely (with credit to Emil's answer)

$("input[type=hidden]").filter(function() {
    return $(this).closest('dd').prev('dt').html() === " ";
}).closest('dd').hide().prev('dt').hide();

Answer 4

As people have already reposted answers... and I can't comment yet cobbal's code is missing this:

$("input[type=hidden]").each(function() {
$(this).parent().hide().prev().filter(function() {
    return $(this).html() === " ";
}).hide();

});

return

Answer 5

The contains selector doesn't match the whole content, so it might work for you, but is not an ideal solution. The correct way to do this is to use the filter function:

$('input[type=hidden]').filter(function() {
   return $(this).prev().html() == ' '
})
.each(function() {
   $(this).hide();
   $(this).prev().hide();
});

Answer 6

This also does the trick (adapted from an earlier version of cobbal's answer):

$("input[type=hidden]").each(function() {
    if ($(this).parent().prev().filter(function() {
        return $(this).html() === " ";
    }).hide().length > 0) {
        $(this).hide();
    }
});