CODEWITHSUNDEEP
jquery
Kristian Rafteseth
Kristian Rafteseth

Reputation: 2032

jQuery: hiding elements with special attributes

How do you go about hiding elements based on special attributes like so:

<div data-collapsed-icon="music">hide this element</div>

So, hiding elements where data-collapsed-icon attribute equals music?

Upvotes: 2

Views: 39

Answers (3)

Josh Crozier
Josh Crozier

Reputation: 240928

Use the attribute selector, [data-collapsed-icon="music"]:

$('[data-collapsed-icon="music"]').hide();

Example Here

But since [data-collapsed-icon="music"] is a CSS selector, you could also use:

[data-collapsed-icon="music"] {
    display: none;
}

Example Here

Upvotes: 2

Ted
Ted

Reputation: 14927

Also, as an alternative, you can accomplish this without jQuery, using CSS only:

div[data-collapsed-icon="music"]{
    display:none;
}

Upvotes: 0

Crash Override
Crash Override

Reputation: 461

You could try something like this

$('[data-collapsed-icon]').each(function() {
  var $this = $(this);
  var attr = $this.attr('data-collapsed-icon');
  if(attr == 'music'){
   $this.hide();
  }
});

Working example http://jsfiddle.net/8yy4pz93/

Upvotes: -1

Related Questions