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

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>

Answer 3

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