Jquery hiding is not working for other Divs

Question

0.00/5 (No votes)

See more:

Here's the code for hiding :

XML

<script type="text/javascript">
$(document).ready(function(){
    $('a.del').click(function () {
        $('#status').hide();
    });
});
</script>

I have three div for example :

XML

<div id="status">
Donec faucibus quiseee est ac tempus. Praesent
sed blandit libero. Mauris eget faucibus arcu.
Ut a nunc quis neque rutrum luctus nec sed nibh.
Donec faucibus quis est ac tempus. Praesent sed blandit
libero. Mauris eget faucibus arcu.
<a href="##" class="del">Delete</a>
</div>

<div id="status">
Donec faucibus quis est ac tempus. Praesent
sed blandit libero. Mauris eget faucibus arcu.
Ut a nunc quis neque rutrum luctus nec sed nibh.
Donec faucibus quis est ac tempus. Praesent sed blandit
libero. Mauris eget faucibus arcu.
<a href="##" class="del">Delete</a>
</div>

<div id="status">
Donec faucibus quis est ac tempus. Praesent
sed blandit libero. Mauris eget faucibus arcu.
Ut a nunc quis neque rutrum luctus nec sed nibh.
Donec faucibus quis est ac tempus. Praesent sed blandit
libero. Mauris eget faucibus arcu.
<a href="##" class="del">Delete</a>
</div>

By clicking on "del" link Jquery is just hiding only one div !

Posted 4-Jun-14 23:57pm

liquidsmoke07

Add a Solution

Comments

Ajith K Gatty 5-Jun-14 6:22am

hi,

give all div different id. and call hide explicitly for each div in script. It works. I mean deletes all your div.

2 solutions

Solution 1

All 3 of your div's have identical ID's, element ID's need to be unique.

I've modified your code by adding a cssclass to the div elements, and changed your jquery selector to now use the css class.

Hope it helps.

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $('a.del').click(function () {
        $('.status').hide();
    });
});
</script>

HTML

<div class="status">
Donec faucibus quiseee est ac tempus. Praesent
sed blandit libero. Mauris eget faucibus arcu.
Ut a nunc quis neque rutrum luctus nec sed nibh.
Donec faucibus quis est ac tempus. Praesent sed blandit
libero. Mauris eget faucibus arcu.
<a href="##" class="del">Delete</a>
</div>
 
<div class="status">
Donec faucibus quis est ac tempus. Praesent
sed blandit libero. Mauris eget faucibus arcu.
Ut a nunc quis neque rutrum luctus nec sed nibh.
Donec faucibus quis est ac tempus. Praesent sed blandit
libero. Mauris eget faucibus arcu.
<a href="##" class="del">Delete</a>
</div>
 
<div class="status">
Donec faucibus quis est ac tempus. Praesent
sed blandit libero. Mauris eget faucibus arcu.
Ut a nunc quis neque rutrum luctus nec sed nibh.
Donec faucibus quis est ac tempus. Praesent sed blandit
libero. Mauris eget faucibus arcu.
<a href="##" class="del">Delete</a>
</div>

Posted 5-Jun-14 0:09am

hypermellow

Comments

liquidsmoke07 5-Jun-14 6:11am

Hey thanks ! But it's hiding all divs ! I want to hide one div at one click! thanks :)

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

DamithSL · Accepted Answer · 2014-06-05T00:10:00

Solution 2

JavaScript

$('a.del').click(function (e) {
    e.stopPropagation();
   $(this).parent().hide();
});

DEMO[^]

Posted 5-Jun-14 0:10am

DamithSL

Comments

Ajith K Gatty 5-Jun-14 6:24am

good solution.

DamithSL 5-Jun-14 6:30am

Thank you Ajith!

liquidsmoke07 5-Jun-14 6:26am

Thanks man ! Worked well :)

DamithSL 5-Jun-14 6:30am

You are welcome!