javascript - How to hide div after clicking on button? - Stack Overflow

admin管理员组

文章数量:1404923

I would like to hide the div (which is "hide-div") as soon as the user cliks on the button when there is a navigation to the same page. Please help me on this. Thanks

<div id="hide-div">
   <button type="button" title="test" class="button btn-small" onclick="setLocation('abc');"><span>'Add to Cart'</span></button>
</div>

I would like to hide the div (which is "hide-div") as soon as the user cliks on the button when there is a navigation to the same page. Please help me on this. Thanks

<div id="hide-div">
   <button type="button" title="test" class="button btn-small" onclick="setLocation('abc.');"><span>'Add to Cart'</span></button>
</div>

• javascript

Share Improve this question Follow edited Sep 10, 2015 at 12:35 m4n0 32.4k2828 gold badges8080 silver badges9696 bronze badges asked Sep 10, 2015 at 12:18 KumarKumar 17911 silver badge77 bronze badges 4

• Please follow below link stackoverflow./questions/14648439/… – Suman Singh Commented Sep 10, 2015 at 12:21
• In setLocation add getElementById('dide-div').setAttribute('style','display:none;'); – nelek Commented Sep 10, 2015 at 12:21
• use localStorage to preserve the value and base on the value show/hide the div .. – Kishore Sahasranaman Commented Sep 10, 2015 at 12:22
• can you please edit above i don't understand. Sorry – Kumar Commented Sep 10, 2015 at 12:23

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Using Vanilla JavaScript. Although I remend using event handler instead of inline JS, this is in view of your code.

1. Hide the element using style.display
2. You can redirect the page after hiding the button using window.location

function setLocation(loc) {
  document.getElementById('hide-div').style.display = 'none';
  window.location = loc;
}

<div id="hide-div">
   <button type="button" title="test" class="button btn-small" onclick="setLocation('http://google.')"><span>'Add to Cart'</span></button>
</div>

You can do this by simple jquery

 <script>
jQuery(document).ready(function($) {
 $(".button").click(function(){
  $("div").fadeOut();
   });
});
</script>

Using jQuery you can do this in your onclick:

$('#hide-div').hide()

http://api.jquery./hide/

Use jQuery to hide it:

$('#hide-div button').click(function(){
    $(this).parent().hide();
});

I assume you have jQuery added to your page already. So, something like this maybe:

 $('#hide-div .button').on('click', function() {
      $('#hide-div').hide();
    });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hide-div">
   <button type="button" title="test" class="button btn-small" onclick="setLocation('abc.');"><span>'Add to Cart'</span></button>
</div>

本文标签： javascriptHow to hide div after clicking on buttonStack Overflow