Check if Data Attribute Exists, Find Matching Value in Another Tag

Question

I'm having trouble with a twitter feed due to a combination of how twitter shortens links and how it handles media entities. Right now, if a tweet has an image, the tweet's li in my feed is being populated with both the image and a link to the image's photo page. I would like to get rid of the image link.

The way the script is set up (I've been working from this one), I've started by inserting the image's url (which is different from its media_url that is used to create the image src) into a data-source attribute within the image tag. That url is the same as the href value in the link I want to get rid of. So I just need to find the data-source attribute (if the tweet contains one), get its value, find the matching href value, and hide the anchor that contains it.

Unfortunately, I don't have a fiddle, but here is an example of a tweet's templating data (I copied it from an alert):

<p class="author">TENNIS.com</p>
The #AusOpen in pictures: all the best images from the season's first Slam. PHOTOS:
<a href="https://t.co/pbx4viaipB" target="_blank" title="https://t.co/pbx4viaipB">[view]</a>
<a href="https://t.co/9KaZNWUP8N" target="_blank" title="https://t.co/9KaZNWUP8N">[view]</a>
<img src='http://pbs.twimg.com/media/CaTVJq4W4AAkQbT.png' data-source='https://t.co/9KaZNWUP8N' />
<p class="stamp"><span class="date">February 3, 2016</span> RT <a href="http://twitter.com/Tennis" target="_blank" title="Tennis on Twitter">@Tennis</a> on 2/3</p>

(That first link is a part of the tweet; the second one is the image that's already embedded.)

Thanks for any help.

Answer 1

A simple cycle will do.

For each image we grab the data-source.

Then we search for all the links that have that as an href $('a[href="data-source"]');

$(document).ready(function() {
  $('img').each(function(i) {
    $('a[href="' + $(this).attr('data-source') + '"]').hide();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="author">TENNIS.com</p>
The #AusOpen in pictures: all the best images from the season's first Slam. PHOTOS:
<a href="https://t.co/pbx4viaipB" target="_blank" title="https://t.co/pbx4viaipB">[view]</a>
<a href="https://t.co/9KaZNWUP8N" target="_blank" title="https://t.co/9KaZNWUP8N">[view]</a>
<img src='http://pbs.twimg.com/media/CaTVJq4W4AAkQbT.png' data-source='https://t.co/9KaZNWUP8N' />
<p class="stamp"><span class="date">February 3, 2016</span> RT <a href="http://twitter.com/Tennis" target="_blank" title="Tennis on Twitter">@Tennis</a> on 2/3</p>

Also, we are using a cycle here because I presume that you will have different tweets in your feed. Else instead of the each() you can select that single image.