Question

JS

$(".row").live("hover",
    function()
    {
        $(".remove").fadeIn();
    }
    );
$(".row").live("blur",
    function()
    {
        $(".remove").fadeOut();
    }
    );

HTML Markup

<div class="row chapter" node="1">
  <img class="remove" src="design/images/remove.png">
  Sample
</div>
<div class="row chapter" node="2">
  <img class="remove" src="design/images/remove.png">
  Sample 2
</div>

What I want to do is,

1. to fade in on hover event, image with class .remove (which stands
   inside hovered .row div) and fade out on blur event.
2. On .remove click, get parent div’s node attribute

JsFiddle

http://jsfiddle.net/tt13/3VG5P/3/

Am I missing something?

Answer 1

1. To fade in on hover event, image with class .remove (which stands inside hovered .row div) and fade out on blur event.

This will toggle the class “remove” within the hovered row.

$('.row').hover(function() {
  $(this).find('.remove').stop(true, true).fadeIn();
}, function(){
  $(this).find('.remove').stop(true, true).fadeOut();
});

You should also use stop(true, true) to clear the animation queue and end any ongoing animation.

1. On .remove click, get parent div’s node attribute

$('.remove').click(function() {
    var $parent = $(this).parent();
    var nodeValue = $parent.attr('node') || "missing-node-value";
    console.log("node =", nodeValue); // DEBUG
    $parent.slideUp();
});

View demo.