CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Steven Ellen Starar
Steven Ellen Starar

Reputation: 93

Jquery onclick close button, hide entire span including close button

I have a css image that has a close button attached to it. I'd like to click the close button, and have the entire span fade out with jquery. This is basically my html:

<span class="topic_new_button">
  <a href="" class="closebutton"></a>
  <a href="" class="imglink""></a>
</span>

And I tried:

$(".closebutton").on("click", function(event) {
    var $row = $(this);
    $row.animate({ opacity: 0.05}, function() {
        $row.find(".imglink").fadeIn();
    });
});

But that doesn't work, can someone point out the error of my ways?

Upvotes: 0

Views: 3927

Answers (3)

gilbert-v
gilbert-v

Reputation: 1305

If this and the above example do not work, your jQuery may be out of date.

$(document).ready(function() {
  $('.closebutton').click(function() { 
    $('span').fadeOut();
  });
});


Also, there is a mistake in your HTML code (extra quote mark), and when you have link with no reference, it returns an error, use something else as a button.

Here is a JSFiddle example using a <button> tag instead.

Upvotes: 0

himanshu
himanshu

Reputation: 1797

first thing you used fadeIn which used for showing instead use fadeOut or hide

if you are not using anymore <span class="topic_new_button"> then below will workout

$(".closebutton").on("click", function (event) {
    $("#topic_new_button").fadeOut();
});

OR

$(".closebutton").on("click", function (event) {
    $("#topic_new_button").hide();
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

To fadeout the entire span, call fadeOut() on the clicked element's parent

$(".closebutton").on("click", function (event) {
    $(this).parent().fadeOut();
    event.preventDefault();
});

Upvotes: 2

Related Questions