How to hide element based on its css property using JQuery?

Question

My task is to hide on button click elements with align: center; using jQuery

By clicking another button those elements must be shown

I tried doing this, but it changes property, not hides it

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>jQuery Task 1</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        p {
            background: blue;
            color: beige
        }
    </style>
</head>
<body>
<style>html, body {
    color: #777;
}</style>
<p style="display: none">Hello</p>
<p class="text" align="center">This is the paragraph</p>
<p class="text">This is the second paragraph</p>
<button id="but1">Click me to hide</button>
<button id="but2">Click me to show</button>
<script>
    $(document).ready(function () {
        $("#but1").click(function () {
            $(('.text').css('text-align', 'center')).hide();
        });
        $("#but2").click(function () {
            $('.text').show();
        });
    });
</script>
</body>
</html>

Rory McCrossan · Accepted Answer · 2021-05-24 17:29:46Z

You're using the setter of css(), so you're setting all the .text elements to central alignment, not filtering them.

To do what you require you can use an attribute selector to retrieve only the .text elements which have the align="center" attribute:

$(document).ready(function() {
  $("#but1").click(function() {
    $('.text[align="center"]').hide();
  });
  
  $("#but2").click(function() {
    $('.text[align="center"]').show();
  });
});

html,
body {
  color: #777;
}

p {
  background: blue;
  color: beige
}

<script src="http://code.jquery.com/jquery-latest.js"></script>
<p style="display: none">Hello</p>
<p class="text" align="center">This is the paragraph - hide this</p>
<p class="text">This is the second paragraph</p>
<button id="but1">Click me to hide</button>
<button id="but2">Click me to show</button>

However the align attribute is very outdated and shouldn't be used. Instead you can use CSS text-align to set the text alignment via a class, then select the .text elements with that class on them. Try this:

$(document).ready(function() {
  $("#but1").click(function() {
    $('.text.center').hide();
  });
  
  $("#but2").click(function() {
    $('.text.center').show();
  });
});

html,
body {
  color: #777;
}

p {
  background: blue;
  color: beige
}

.center { text-align: center };

<script src="http://code.jquery.com/jquery-latest.js"></script>
<p style="display: none">Hello</p>
<p class="text center">This is the paragraph - hide this</p>
<p class="text">This is the second paragraph</p>
<button id="but1">Click me to hide</button>
<button id="but2">Click me to show</button>

If, for whatever reason, you can't set the class on the element and have to put the style rule inline, then you can use filter() instead:

<p class="text" style="text-align: center">This is the paragraph - hide this</p>

$('.text').filter((i, el) => $(el).css('text-align') === 'center').hide();

Barmar · Accepted Answer · 2021-05-24 17:30:49Z

.css('text-align', 'center') doesn't test if the element has this alignment, it sets the alignment. Call .css() with a single argument to get the value of the style, and then test that with ==.

But the align attribute doesn't necessarily translate to the text-align CSS property. For instance, in Chrome it creates the --webkit-align property. So you should use .attr() rather than .css() to test this.

The other answer that uses a single attribute selector is the more idiomatic way to do this, but I'm keeping this answer anyway to show how you do more general filtering when necessary.

$(document).ready(function() {
  $("#but1").click(function() {
    $('.text').filter(function() {
      return $(this).attr('align') == 'center';
    }).hide();
  });

  $("#but2").click(function() {
    $('.text').show();
  });
});

html,
body {
  color: #777;
}

p {
  background: blue;
  color: beige
}

<script src="http://code.jquery.com/jquery-latest.js"></script>
<p style="display: none">Hello</p>
<p class="text" align="center">This is the paragraph - hide this</p>
<p class="text">This is the second paragraph</p>
<button id="but1">Click me to hide</button>
<button id="but2">Click me to show</button>

Collectives™ on Stack Overflow

How to hide element based on its css property using JQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related