I have a bootstrap modal window and I want to hide a div element using javascript.

The bootstrap window is

<div class="modal hide editdialog" id="edit-dialog" data-backdrop="static" style="margin-top: -370px">
    <div class="modal-header">
        <div style="float: right; margin-right: 2px">
            <a id="maximizebuttoneditor" href="#" onclick="maximizeEditor()" rel="tooltip" title="<spring:message code="label.Maximize" />"><i class="icon icon-fullscreen"></i></a>
            <a id="restoredownbuttoneditor" style="display: none" href="#" onclick="restoreDownEditor()" rel="tooltip" title="<spring:message code="label.RestoreDown" />"><i class="icon icon-resize-small"></i></a>
        </div>
        <span id="edit-dialog-title"><spring:message code="label.Edit" /></span>
      </div>
      <div class="modal-body" style="max-height: 610px; height: 610px;">    

        <ul class="nav nav-tabs" id="edit-dialog-tabs">
          <li><a href="#general" data-toggle="tab"><spring:message code="label.General" /></a></li>
          <li id="question-dialog-advanced-tab"><a href="#advanced" data-toggle="tab"><spring:message code="label.Advanced" /></a></li>
          <li><a href="#dependencies" data-toggle="tab"><spring:message code="label.Dependencies" /></a></li>
        </ul>               
        <div class="tab-content">
          <div class="tab-pane active" id="general" >

                <div style="margin-top: 20px;" class="general-regex-dialog-questions" id="general-regex-dialog-questions">
                    <span class="overview-label"><spring:message code="label.RegEx" /></span><br />
                    <input id="question-dialog-regex" type="text" maxlength="255" />
                    <span id="question-dialog-regex-invalid" class="validation-error hide"><spring:message code="validation.NoRegExPattern" /></span>
                </div>              

          </div>
          <div class="tab-pane" id="advanced"> 

          </div>
          <div class="tab-pane" id="dependencies">      

          </div>        
        </div>              
        </div>
          <div class="modal-footer">
            <a id="btnEditOk" onclick="updateSurvey();" class="btn btn-info"><spring:message code="label.OK" /></a>
            <a  id="btnEditCancel" class="btn" onclick="selectedElement = null;$('#edit-dialog').modal('hide');"><spring:message code="label.Cancel" /></a>
          </div>
</div>

I want to hide the div general-regex-dialog-questions

I use the following javascript code

$("#general-regex-dialog-questions").css({"display": "none !important"});

The div element isn't hidden.

I dont't understand why.

I have a bootstrap modal window and I want to hide a div element using javascript.

The bootstrap window is

<div class="modal hide editdialog" id="edit-dialog" data-backdrop="static" style="margin-top: -370px">
    <div class="modal-header">
        <div style="float: right; margin-right: 2px">
            <a id="maximizebuttoneditor" href="#" onclick="maximizeEditor()" rel="tooltip" title="<spring:message code="label.Maximize" />"><i class="icon icon-fullscreen"></i></a>
            <a id="restoredownbuttoneditor" style="display: none" href="#" onclick="restoreDownEditor()" rel="tooltip" title="<spring:message code="label.RestoreDown" />"><i class="icon icon-resize-small"></i></a>
        </div>
        <span id="edit-dialog-title"><spring:message code="label.Edit" /></span>
      </div>
      <div class="modal-body" style="max-height: 610px; height: 610px;">    

        <ul class="nav nav-tabs" id="edit-dialog-tabs">
          <li><a href="#general" data-toggle="tab"><spring:message code="label.General" /></a></li>
          <li id="question-dialog-advanced-tab"><a href="#advanced" data-toggle="tab"><spring:message code="label.Advanced" /></a></li>
          <li><a href="#dependencies" data-toggle="tab"><spring:message code="label.Dependencies" /></a></li>
        </ul>               
        <div class="tab-content">
          <div class="tab-pane active" id="general" >

                <div style="margin-top: 20px;" class="general-regex-dialog-questions" id="general-regex-dialog-questions">
                    <span class="overview-label"><spring:message code="label.RegEx" /></span><br />
                    <input id="question-dialog-regex" type="text" maxlength="255" />
                    <span id="question-dialog-regex-invalid" class="validation-error hide"><spring:message code="validation.NoRegExPattern" /></span>
                </div>              

          </div>
          <div class="tab-pane" id="advanced"> 

          </div>
          <div class="tab-pane" id="dependencies">      

          </div>        
        </div>              
        </div>
          <div class="modal-footer">
            <a id="btnEditOk" onclick="updateSurvey();" class="btn btn-info"><spring:message code="label.OK" /></a>
            <a  id="btnEditCancel" class="btn" onclick="selectedElement = null;$('#edit-dialog').modal('hide');"><spring:message code="label.Cancel" /></a>
          </div>
</div>

I want to hide the div general-regex-dialog-questions

I use the following javascript code

$("#general-regex-dialog-questions").css({"display": "none !important"});

The div element isn't hidden.

I dont't understand why.

• javascript
• window
• bootstrap-modal
• element
• hidden

• Have you tried $("#general-regex-dialog-questions").hide(); – Kiran Shinde Commented Jun 27, 2017 at 6:38
• Have you tried $("#general-regex-dialog-questions").addClass("hide"); – Maths RkBala Commented Jun 27, 2017 at 6:39
• Make sure when your code is running, element is present in DOM – Kiran Shinde Commented Jun 27, 2017 at 6:40
• How can I check if the element is present in DOM?. I checked the explorador DOM in the browser and I can see the element. But it doesn't have display:none . Why? – Carlota Commented Jun 27, 2017 at 6:48

3 Answers 3

Maybe because it is inside the modal.

You can try it like this:

$(window).ready(function(){

     $("#edit-dialog").find("#general-regex-dialog-questions").hide();
     //or
     $("#edit-dialog").find("#general-regex-dialog-questions").css({"display": "none"});
});

Hope it will help.

This syntax {"display": "none !important"} doesn't work because of the !important.
If you leave out the !important it works fine.
However, if you want to set the importance as well, you can set it like this:

$( '.foo' ).each(function () {
   this.style.setProperty( 'display', 'none', 'important' );
});

To hide an element using jquery, you should use the .hide() method. If you want to show it back use .show().

If you might switch beetween the two you could also use .toggle() that will alternate the state (hidden/visible).

If it's still not working, try printing something when calling your event function to make sure your .hide() is called or print out the result of the selection $("#...")

$("#test").click( function(e){
  $("#test").hide();
} );

function show() {
  $("#test").show()
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Title </h1>
<button onclick="show()">Show it back</button>
<div id="test" style="background-color: #CCC">
  <h2>Bunch of stuff</h2>
  <p>Blabla blabla blabla <br>
  Click on me to make me disappear </p>
  <span> I'm a span and I dissapear too </span>
</div>

<p> Bunch of stuff that will not disappear neither </p>