on .bind('click') it is not deleting the first div

Question

When I click on a particular div, that div should fade out, simple, but when I click on one of the divs it deletes the div on top of the stack, i.e. when I click #sel6 it removes sel5

HTML code

<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">

<div id="sel5" class="sel">something</div>
<div id="sel6" class="sel">something</div>
<div id="sel7" class="sel">something</div>

</div>

jQuery code sel_id, sel_1 are variables

$('.selc_d').bind('click',function(){ 
  var sel_id = $('.sel').attr('id');
  alert(sel_id);

  $('#'+sel_id).fadeOut('slow');
  $('#'+sel_id).remove();
  $('.search_box').append(sel_1);
});

Answer 1

$('.sel').bind('click',function(){
    var sel_id = this.id; // replace this line using this.id or $(this).attr('id');
    alert(sel_id);
    $('#'+sel_id).fadeOut('slow');
    $('#'+sel_id).remove();
    $('.search_box').append(sel_1);
});

Note the use of this... this will contain the element that is clicked.

What you were doing was

var sel_id = $('.sel').attr('id'); 

Which will always select the first div with class sel in this case the div with id sel5

##WHAT YOU WANT##

<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">

    <div id="sel5" class="sel">something</div>
    <div id="sel6" class="sel">something</div>
    <div id="sel7" class="sel">something</div>

</div>

$('.sel').bind('click',function(){
    var sel_id = $(this).attr('id');
    alert(sel_id);
    $('#'+sel_id).fadeOut('slow');
    $('#'+sel_id).remove();
    $('.search_box').append(sel_1);
});

Answer 2

it looks like, you are trying something like this

$('.sel').bind('click', function(){
    $this = $(this);
    $this.fadeOut('slow', function(){$this.remove();});
    $('.search_box').append(this.id);
});

Answer 3

That's because you are saying $('.sel')

You need to grab the one that is clicked, not any one that has that class. To make that work as you want, do this

$('.sel').click( function() {
    var sel_id = $(this).attr('id');

    $(this).fadeOut('slow');

    // Wait for it to fade out before you remove it
    setTimeout( function() {
        $('#' + sel_id).remove();
    }, 1000 );


    $('.search_box:first').append(sel_id);
});