Hide parent div on click using jQuery

Question

So I'm trying to write a super simple script that will allow a user to throw any link or button with the class .close inside of a div, and when that .close link is clicked, it automatically closes the parent container.

Here is what I'm currently trying to work with: JSFiddle

The code that I am currently trying to use is:

HTML

<div class="well notice bg-green">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <p>This is a notice that is green.</p>
</div>

CSS

.well {
    background: #f9f9f9;
    border-color: #f1f1f1;
    border-style: solid;
    border-width: 1px;
    padding: 15px 20px;
}
.notice {
    margin: 15px 0;
    padding: 0px 15px;
}
.well.bg-green {
    background: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
}
.close {
    color: #000;
    filter: alpha(opacity=20);
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    margin-top: 15px;
    opacity: .2;
    text-shadow: 0 1px 0 #fff;
}
.close:hover, .close:focus {
    color: #000;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
    text-decoration: none;
}
button.close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

JavaScript (jQuery)

$('.close').live("click", function () {
    $(this).parents('div').fadeOut;
});

Let me know if my question doesn't make sense or if any more elaboration is needed. Thank you!

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. — j08691, Feb 26 '14 at 20:20

score 25 · Accepted Answer · answered Feb 26 '14 at 20:19

25

Two problems:

live() doesn't exist in the version of jQuery in your fiddle (deprecated in 1.7, removed in 1.9)
fadeOut is a function (you were missing parens to execute it)

http://jsfiddle.net/KF7S6/

$('.close').on("click", function () {
    $(this).parents('div').fadeOut();
});

If you want it to work on dynamic elements, use this version:

$(document).on('click', '.close', function () {
    $(this).parents('div').fadeOut();
});

answered Feb 26 '14 at 20:19

Jason P

26,984
3
31
45

1

Ah yes, that shows my true lack of experience with JavaScript but thank you so much for your help. Your code worked perfectly. I very much appreciate it. – Keenan Payne Feb 26 '14 at 20:32

score 4 · Answer 2 · answered Feb 26 '14 at 20:19

4

http://jsfiddle.net/6Xyn4/4/

$('.close').click(function () {
    $(this).parent().fadeOut();
});

Recommended to use .click() now in place of deprecated .live()

answered Feb 26 '14 at 20:19

Christopher Marshall

10,678
10
55
94

score 3 · Answer 3 · edited May 23 '17 at 10:29

3

working demo http://jsfiddle.net/gL9rw/

Issue was .live which is deprecated now.

If you keen: What's wrong with the jQuery live method? :)

code

$('.close').on("click", function () {
    $(this).parents('div').fadeOut();
});

edited May 23 '17 at 10:29

Community

1
1

answered Feb 26 '14 at 20:19

Tats_innit

33,991
10
71
77

1

Thank you for sharing that link! I didn't know `.live` was deprecated, I was trying to piece together my code from other Stack Overflow questions (as I'm sure everyone noticed) haha. – Keenan Payne Feb 26 '14 at 20:33

score 1 · Answer 4 · answered Feb 26 '14 at 20:20

1

Try this, it should be fadeOut() not fadeOut

$('.close').click(function () {
  $(this).parents('div').fadeOut();
});

answered Feb 26 '14 at 20:20

Krish R

22,583
7
50
59

score 0 · Answer 5 · answered Feb 26 '14 at 20:21

0

.live() is dead. use .on() delegates. Also you missed something, check below

$('body').on("click", '.close', function () {
        $(this).parents().fadeOut();
    });

Fiddle

answered Feb 26 '14 at 20:21

Subash Selvaraj

3,385
1
14
17

Hide parent div on click using jQuery

5 Answers5

Linked

Related