how to hide class with javascript

Question

how to hide class with javascript . I get a value if status = 1 then the class show, and if status = 2 then the class is hidden.

<div class="entry-img" id="status">
  <img id="txt_img_content_1" alt="" class="img-fluid">
</div>

you want to hide the div or just remove the class, you can use toggle or show or hide — Ahmed Sunny, Aug 11 '21 at 08:08
This may help with finding your answer: https://stackoverflow.com/a/18414401/13566068 — Aaron, Aug 11 '21 at 08:10

score 1 · Answer 1 · answered Aug 11 '21 at 09:42

1

I thing, that toggle might be to use in your case:

function setStatus(status) {
    document.querySelector("#status").classList.toggle("entry-img", status == 1);
}

div {
  width: 30px;
  height: 30px;
  background: #f00;
  border-radius: 100%;
}
.entry-img {
  background: #0f0;
}

<div id="status"></div>
<button onclick="setStatus(1)">1</button>
<button onclick="setStatus(2)">2</button>

answered Aug 11 '21 at 09:42

Sven

524
4
10

we don't use a button click, just want to display a class that use a status with value which is called using ajax – Luna Project Aug 11 '21 at 10:56
it was just an example to show, how it works. Just look inside the example-function "setStatus". The code ".classList.toggle(, )" is simple and you controll, if the css-class is added by the flag (true=add, false=remove). – Sven Aug 12 '21 at 08:41

Pavel Kosov · Answer 2 · 2021-08-11T08:24:49.060

0

You can do it with the code something like this.

var element = document.getElementById("status");
if(status==2){
  element.classList.remove("entry-img");
}
if(status==1){
  element.classList.add("entry-img");
}

For more information you can refer to this links https://www.w3schools.com/howto/howto_js_remove_class.asp https://www.w3schools.com/howto/howto_js_add_class.asp https://www.w3schools.com/js/js_if_else.asp

edited Aug 11 '21 at 08:24

answered Aug 11 '21 at 08:09

Pavel Kosov

33
7

also, if you get an element, it won't be a number – The Fool Aug 11 '21 at 08:11

score 0 · Answer 3 · answered Aug 11 '21 at 08:23

0

var divElement = document.getElementById("status");
if(status==2){
  divElement.classList.remove("entry-img");
}
if(status==1){
  divElement.classList.add("entry-img");
}

answered Aug 11 '21 at 08:23

Hitesh Sadhrakiya

19
4

how to hide class with javascript

3 Answers3