jQuery单击关闭按钮时它只会隐藏特定的div？

Question

I have this piece of markup. Remember all these are coming from the database. I have used foreach loop and in that I am getting those values

<div id="announcment-wrap">
    <div class="announcement-text">
    This is again a dummy 
    <a href="http://www.google.com">|&nbsp;click here</a>
    <a id="close" href="#" class="close">X</a>
  </div>
    <div class="announcement-text">
    This is demo 3 
    <a href="http://www.google.co.in">|&nbsp;Demo3</a>
    <a id="close" href="#" class="close">X</a>
  </div>
    <div class="announcement-text">
    This is demo 4 
    <a href="http://facebook.com">|&nbsp;Demo again</a>
    <a id="close" href="#" class="close">X</a>
  </div>    
</div>

Now you can see there is a close button <a id="close" href="#" class="close">X</a>. I want that when someone will click on close button then it will only hide that div() In jquery when I used

jQuery(document).ready(function($) {
  jQuery('#close').click(function() {
    jQuery('.announcement-text').hide();
  });
});

it is only working for the first block and also it is hiding the total all blocks? So can someone tell me how to make that when someone will click on that close button and it will hide that particular block.Thanks

Answer 1

Try:

jQuery(document).ready(function($) {
  jQuery('#close').click(function() {
    jQuery(this).parent('.announcement-text').hide();
  });
});