If an element contains data-item=* hide the element

Question

I'm having trouble with a Wordpress plugin called 'Social Feed Gallery' that imports my instagram images to a website gallery. I'm trying to remove certain photos / elements (each image container has the class 'insta-gallery-item') when the data-item contains the hashtag 'remove_me'.

Here's an example of the MESSY HTML

<div id="insta-gallery-feed">
<div class="insta-gallery-inner">
<div id="insta-gallery-item-17972204888477284" class="insta-gallery-item" data-item="{hashtags&quot;:[&quot;isleofskye&quot;,&quot;remove_me&quot;,&quot;ferry&quot;,&quot;mountains&quot;,&quot;ferrydogs&quot;,&quot;scotland&quot;,&quot;coastalwaters&quot;,&quot;scottishlandscape&quot;,&quot;Glenelg&quot;,&quot;ferry&quot;,&quot;overthrseatoskye&quot;,&quot;sailing&quot;,&quot;scotland&quot;,&quot;visitscotland&quot;,&quot;instascotland&quot;,&quot;nature&quot;,&quot;scotlandshots&quot;,&quot;lovescotland&quot;,&quot;nathistships&quot;],&quot;link&quot;:&quot;}" data-elementor-open-lightbox="no">
<img src="image-is-here.jpg">
</div>
</div>
</div>

Here's my JQUERY

        <script>

(function($) {
$(document).ready(function() {

$('#insta-gallery-feed').find('.insta-gallery-item').each(function() {

  if ($(this).data('item').indexOf('remove_me') !== -1) {
    $(this).hide();
  }
});
});

})(jQuery);
        </script>

Doesn't seem to work, also tried this one; Hide element if data contains specific piece of text?

You can do this with plain css: `[data-item="remove-me"] {display: none;}` — Axnyff, Apr 03 '23 at 17:44
@Axnyff - thank you, doesn't seem to work in this instance as the data-items code is so messy with this plugin, outputs: data-item="{hashtags":["isleofskye","remove_me", — Callum, Apr 03 '23 at 18:35
Are you sure the html is like this ? I can't manage to decode it to valid json — Axnyff, Apr 03 '23 at 18:41
If the data-item contains remove_me then `[data-item*="remove_me"] {display: none;}` should work — Axnyff, Apr 03 '23 at 18:43
@Axnyff - that did it. The solution was the *= it seems this plugin loads later than my script, so that was a waste of time. CSS fixed it. Thanks so much. Hope that's helpful to other users of the plugin who wish to filter their Instagram Gallery . — Callum, Apr 03 '23 at 19:10

score 1 · Accepted Answer · answered Apr 03 '23 at 21:20

For what it's worth, that big ugly data item is, or should be, an html-encoded JSON string. (In your example it's not valid JSON, but that may be a result of the cutting and pasting needed to write a question here.)

If the JSON string in your question were valid, it would represent a Javascript object looking like something like this.

const dataobject = {
    hashtags: [
        "isleofskye", "remove_me", "ferry", "mountains",
        "ferrydogs", "scotland", "coastalwaters",
        "scottishlandscape", "Glenelg", "ferry",
        "overthrseatoskye", "sailing", "scotland",
        "visitscotland", "instascotland", "nature",
        "scotlandshots", "lovescotland", "nathistships"
    ],
    link: null
}

You could (if the JSON were valid) use this code to detect whether one of your hastags was "remove_me". It would probably have better data integrity than just searching the string.

const datastring = $(this).data('item')
const dataobject = JSON.parse(datastring)
const hashtags = dataobject.hashtags
if (hashtags.includes('remove_me') ) {
    $(this).hide();
}

Yes, it is true I had clipped the text (which is/was valid JSON) to simplify my question. This is a truly marvellous and thorough solution beyond the CSS fix mentioned in the commends above. Thank you. — Callum, Apr 04 '23 at 13:13

If an element contains data-item=* hide the element

1 Answers1