bootstrap javascript how to hide a div in a modal window

Question

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.

Answer 1

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.

Answer 2

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' );
});

Answer 3

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.com/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>