bootstrap javascript how to hide a div in a modal window - Stack Overflow

admin管理员组

文章数量:1026989

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

Share Improve this question Follow asked Jun 27, 2017 at 6:34 CarlotaCarlota 1,23766 gold badges2929 silver badges6767 bronze badges 4

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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>

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

Share Improve this question Follow asked Jun 27, 2017 at 6:34 CarlotaCarlota 1,23766 gold badges2929 silver badges6767 bronze badges 4

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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>

本文标签： bootstrap javascript how to hide a div in a modal windowStack Overflow