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). — mrlew, Feb 13 '17 at 16:05
you can simplify it to `$(".product [id$=" + id_get + "]").hide()` — Ja9ad335h, Feb 13 '17 at 16:09

score 3 · Accepted Answer · answered Feb 13 '17 at 16:04

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 '17 at 16:04

Matt Spinks

6,380
3
28
47

Have you tried to debug it? Are you sure your id's match up? – Matt Spinks Feb 13 '17 at 16:22
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. – Matt Spinks Feb 13 '17 at 16:33
the problem was that i had a class named "A+++",why i can't? – Jack_usti Feb 13 '17 at 16:34
Not sure what you mean there. Can't what? – Matt Spinks Feb 13 '17 at 16:35
this doesn't work,
this works
– Jack_usti Feb 13 '17 at 16:38
I see. That's expected. You can't use `+` in the id. Only letters, numbers, dashes, etc. Check this for a reference: http://stackoverflow.com/questions/1077084/what-characters-are-allowed-in-dom-ids – Matt Spinks Feb 13 '17 at 16:39

How to hide item in html with jquery using variable

1 Answers1