.addClass() jQuery how to specify the CSS

98
March 13, 2018, at 5:30 PM

I have a div and I want to put a display none when I click on it. I am using bootstrap4 and It has a css style called "d-none" that put display none to an element.

For that, I have put this in the .js:

$("#div").on("click", function(e, m) {
  alert("Enter OK");
  $("div").addClass("d-none");
});

but I donĀ“t know how to specify that it must take the style form the bootstrap.min.css, because I am using more than one css at the same time.

I have tried this:

 $("#div").on("click", function(e, m) {
      alert("Enter OK");
      $("div").addClass("../css/bootstrap.min.css/d-none");
    });

But it doesn't work.

How can I specify the CSS?

Answer 1

As per my understanding, the class .d-none is applying to the div on click event but other CSS file overrides it. There are other bootstrap properties also as .hide or .hidden (check these as per your bootstrap version). you can apply that.

If still it is not working - you can create your own unique class and set property as display:hidden; and add the same class instead of .d-none

also don't forget to add this line:

$(this).addClass("d-none"); instead of $("div").addClass("d-none");, because it will apply to the particular element that you want to hide.

Hope this may help you.

Answer 2
$("#div").on("click", function(e, m) {
  alert("Enter OK");
  $(this).addClass("d-none"); // If you want to add class
  $(this).hide(); // if you want to hide this dive 
});
READ ALSO
Strange bug. Javascript, , Trying to run a loop, but getting a blank error in Chrome console

Strange bug. Javascript, , Trying to run a loop, but getting a blank error in Chrome console

I'm running a loop on an array received from an obj {message:Array(22)} ajax callYou can see the array has length = 22

82
jquery Nestable is not scrolling while list is long

jquery Nestable is not scrolling while list is long

I'm using Nestablejs for drag/drop I'm displaying that list (on which drag/drop required) in a modal(bootstrap modal), Everything is working fine for me, the issue is when list (within

83
How to set input data-toggle for a link in bootstrap?

How to set input data-toggle for a link in bootstrap?

I have a link and I want to set a bootstrap toggle for it :

93
Does a zero width character that is skipped by the caret while moving it with keyboard arrows exist? (ie11, contenteditable)

Does a zero width character that is skipped by the caret while moving it with keyboard arrows exist? (ie11, contenteditable)

I have a div with several span tags insideIn each span tag I put zero-width character:

54