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 elementif($(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:

<selectid="mySelect"><optionvalue="">Please select...</option><optionvalue="Design">Design</option><optionvalue="Graphic Design">Graphic Design</option></select><br /><dlclass='gallery-item'><dtclass='gallery-icon landscape'><ahref="Page Link"target="_self"class="no-lightbox"><imgwidth="250"height="250"src="Display Image"class="attachment-full"alt="Design" /></a></dt><ddclass='wp-caption-text gallery-caption'>Description of Page</dd></dl><dlclass='gallery-item'><dtclass='gallery-icon landscape'><ahref="Page Link"target="_self"class="no-lightbox"><imgwidth="250"height="250"src="Display Image"class="attachment-full"alt="Graphic Design" /></a></dt><ddclass='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