Hiding A Parent Element Using JS/JQuery Based On The Alt Tag Of A Child Element

My portfolio website has a Wordpress backend, and I use a Wordpress gallery to produce links to my various projects. It is getting somewhat bulky now, however, and I would like to

Solution 1:

Yes, you can hide the parent, based on the child's attribute:

Js (vanilla) :

//Consider "el" as the <a> clicked element
if(el.children[0].getAttribute("alt") == "Something") {
    el.parentNode.style.display = "none";
}

Jquery:

//Consider "el" as the <a> clicked element
if($(el).find("img").is("[alt='Something']")) {
    $(el).parent().hide();
}

But as commented, you should set another property for that other than alt, for it has a different purpose...

Solution 2:

As others have mentioned, you could put this in a data attribute that would be better suited for such an application, but given the specific context you have here, something along the lines of:

$("#hideDesign").click(function() {
        $("[alt='Design']").parent().toggle();
})

Where "#hideDesign" is the ID of an element that you want the user to click on to toggle the view of that particular type of element.

Solution 3:

Assuming you can't manipulate the img tags and give them a data attribute, you can still rely on the alt attribute to achieve that.

Just to illustrate, I'm considering the markup below:

<select id="mySelect">
    <option value="">Please select...</option>
    <option value="Design">Design</option>
    <option value="Graphic Design">Graphic Design</option>
</select>
<br />
<dl class='gallery-item'> <dt class='gallery-icon landscape'>
        <a href="Page Link" target="_self" class="no-lightbox"><img width="250" height="250" src="Display Image" class="attachment-full" alt="Design" /></a>
    </dt>

    <dd class='wp-caption-text gallery-caption'>Description of Page</dd>
</dl>

<dl class='gallery-item'> <dt class='gallery-icon landscape'>
        <a href="Page Link" target="_self" class="no-lightbox"><img width="250" height="250" src="Display Image" class="attachment-full" alt="Graphic Design" /></a>
    </dt>

    <dd class='wp-caption-text gallery-caption'>Description of Page</dd>
</dl>

And using jQuery:

$(function () {
    // When the user selects a gallery item to display.
    $('#mySelect').on('change', function () {
        // We hide all of them.
        $('.gallery-item').hide();

        // If there's actually something selected.
        if ($(this).val()) {
            // Select the image which alt is the value selected, 
            // and show its parent which class is gallery-item.
            $('[alt="' + $(this).val() + '"]').parents('.gallery-item').show();
        }
    });
});

Demo

Just to complement, the other way round:

$(function () {
    // When the user selects a gallery item to hide.
    $('#mySelect').on('change', function () {
        // We show all of them.
        $('.gallery-item').show();

        // If there's actually something selected.
        if ($(this).val()) {
            // Select the image which alt is the value selected, 
            // and hide its parent which class is gallery-item.
            $('[alt="' + $(this).val() + '"]').parents('.gallery-item').hide();
        }
    });
});

Demo