CODEWITHSUNDEEP
phpjqueryhtmljquery-ui
Rakesh Mishra
Rakesh Mishra

Reputation: 375

jQuery when click on the close button it will only hide that particular div only?

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

Upvotes: 0

Views: 2116

Answers (6)

Dev
Dev

Reputation: 6776

ID should be unique so use selector as .close not #lose

Try http://jsfiddle.net/devmgs/ZGjaj/

Your each text is 

<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>

USe

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

Upvotes: 2

Prabha
Prabha

Reputation: 21

Since the close button is inside the div, u can make use of the .parent() function to select the div.

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

all the best!! hope this helps.

Upvotes: 1

Greenhorn
Greenhorn

Reputation: 1700

Id's should be unique so use class instead,and try using .closest()

<a href="http://www.google.co.in">|&nbsp;Demo3</a>
<a class="close" href="#" class="close">X</a>
-----^

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

Upvotes: 1

Dinesh Kumar Sarangapani
Dinesh Kumar Sarangapani

Reputation: 431

First of all, you cannot have the same ID for all the Close buttons, Remove duplicate ID. This won;t work in IE7 <

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

Upvotes: 0

Ajinder Singh
Ajinder Singh

Reputation: 530

You need to use the class i.e .close to work for all close close button Or specify different id to all of them . 

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

Upvotes: 0

Kiran
Kiran

Reputation: 20313

Try:

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

Upvotes: 1

Related Questions