How to hide item in html with jquery using variable

Question

i'm trying to use this simple script to hide some element by ID, i have the id in a variable but it doesn't work.. this is the code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
function filter(id_get) {
  $(".product").each(function(index) {
    var f = this.id;
    if (!f.includes(id_get)) {
      var hash = "#";
      var cmp = hash.concat(f);
      $(cmp).attr("display", "none");
    }
  });
}
</script>

if i do a console.log(cmp) it displays correct product id to remove, but it doesn't hide the div.

i've also tried $(cmp).hide

Don't know if that's the only problem, but setting display attr to none will do nothing (there is no display attribute into the element). display is a css property. In order to hide your elements with jQuery, ou can use $(cmp).css("display","none"); or $(cmp).hide() (with parentheses). — luiscrjr
– luiscrjr, Commented Feb 13, 2017 at 16:05
you can simplify it to $(".product [id$=" + id_get + "]").hide() — Ja9ad335h
– Ja9ad335h, Commented Feb 13, 2017 at 16:09

Matt Spinks · Accepted Answer · 2017-02-13 16:04:07Z

3

You are attempting to change an attribute directly. display is not an attribute. style is an attribute. You can change the display property of the style attribute. Change $(cmp).attr("display","none"); to:

$(cmp).css("display", "none");

Or, you can just use the built in jQuery hide function. Change $(cmp).attr("display","none"); to:

$(cmp).hide();

In context:

function filter(id_get){
    $( ".product" ).each(function( index ) {
        var f = this.id;
        if(!f.includes(id_get)){
          var hash = "#";
          var cmp = hash.concat(f);
          $(cmp).hide();
        }
    });
}

answered Feb 13, 2017 at 16:04

Matt Spinks

6,7404 gold badges32 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Matt Spinks Over a year ago

Have you tried to debug it? Are you sure your id's match up?

Matt Spinks Over a year ago

If you post more of your html code, we might be able to see what else could be going on. As it is now, we're driving blind. My answer could be only part of the solution. There could be something else going on as well.

Jack_usti Over a year ago

the problem was that i had a class named "A+++",why i can't?

Matt Spinks Over a year ago

Not sure what you mean there. Can't what?

Jack_usti Over a year ago

<div id="A+++_OT"> this doesn't work, <div id="_OT"> this works

|

Collectives™ on Stack Overflow

How to hide item in html with jquery using variable

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related