类上的jQuery click事件仅触发第一个元素

Question

Only the first element (the first button) will get the remove event from the class "remove-row"

My HTML:

<button type="button" class="draggable-button">
    <div>Some value<input type="hidden" name="row[][key1]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key2]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key3]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key4]"></div>
    <div class="edit-row">Edit</div>
    <div class="remove-row">X</div>
</button>
<button type="button" class="draggable-button">
    <div>Some value<input type="hidden" name="row[][key1]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key2]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key3]"></div>
    <div data-value="1">Some value<input type="hidden" name="row[][key4]"></div>
    <div class="edit-row">Edit</div>
    <div class="remove-row">X</div>
</button>

My JavaScript/jQuery:

$(document).ready(function () {
    // Remove row
    $('.remove-row').on('click', function () {
        $(this).parent().remove();
    });
});

I hope it's not duplicated because I tried this and some other questions, but without success.

Answer 1

$(document).ready(function () {
    $('.remove-row').each(function(index) {
      $(this).on('click', function () {
        $(this).parent().remove();
      });
    });
});

Would do it, see this Plunk . Note that you have to click exactly on the (line of the) X to make it work.

Answer 2

 $(function () { $(document).ready(function () { // Remove row $('.remove-row').on('click', function () { $(this).parent().remove(); }); }); $('.draggable-button').mousedown(function (e) { if (e.which === 1) { var button = $(this); var button_id = button.attr('id'); var parent_height = button.parent().innerHeight(); var top = parseInt(button.css('top')); var original_ypos = button.position().top; //original ypos var drag_min_ypos = 0 - original_ypos; var drag_max_ypos = parent_height - original_ypos - button.outerHeight(); var drag_start_ypos = e.clientY; var my_ypos = original_ypos; //Set current order for all $('.draggable-button').each(function (i) { $(this).attr('data-order', (i + 1)); }); var prev_button = button.prev('.draggable-button'); var next_button = button.next('.draggable-button'); var prev_button_ypos = prev_button.length > 0 ? prev_button.position().top : ''; var next_button_ypos = next_button.length > 0 ? next_button.position().top : ''; $(window).on('mousemove', function (e) { //Move and constrain button.addClass('drag'); var direction = my_ypos > button.position().top ? 'up' : 'down'; var new_top = top + (e.clientY - drag_start_ypos); my_ypos = button.position().top; button.css({top: new_top + 'px'}); if (new_top < drag_min_ypos) { button.css({top: drag_min_ypos + 'px'}); } if (new_top > drag_max_ypos) { button.css({top: drag_max_ypos + 'px'}); } //Check position over others if (direction == 'down' && next_button_ypos != '') { if (my_ypos > next_button_ypos) { //crossed next button next_button.css({top: (parseInt(next_button.css('top')) - next_button.outerHeight(true)) + 'px'}); //up once var tmp_order = next_button.attr('data-order'); next_button.attr('data-order', button.attr('data-order')); //switch order button.attr('data-order', tmp_order); prev_button = next_button; next_button = next_button.nextAll('.draggable-button:not(.drag)').first(); prev_button_ypos = prev_button.length > 0 ? prev_button.position().top : ''; next_button_ypos = next_button.length > 0 ? next_button.position().top : ''; } } else if (direction == 'up' && prev_button_ypos != '') { if (my_ypos < prev_button_ypos) { //crossed prev button prev_button.css({top: (parseInt(prev_button.css('top')) + prev_button.outerHeight(true)) + 'px'}); //down once var tmp_order = prev_button.attr('data-order'); prev_button.attr('data-order', button.attr('data-order')); //switch order button.attr('data-order', tmp_order); next_button = prev_button; prev_button = prev_button.prevAll('.draggable-button:not(.drag)').first(); prev_button_ypos = prev_button.length > 0 ? prev_button.position().top : ''; next_button_ypos = next_button.length > 0 ? next_button.position().top : ''; } } }); $(window).on('mouseup', function (e) { if (e.which === 1) { $('.draggable-button').removeClass('drag'); $(window).off('mouseup mousemove'); //Reorder and reposition all $('.draggable-button').each(function () { var this_order = parseInt($(this).attr('data-order')); var prev_order = $(this).siblings('.draggable-button[data-order="' + (this_order - 1) + '"]'); if (prev_order.length > 0) { $(this).insertAfter(prev_order); } }); $('.draggable-button').css('top', '0'); $('.draggable-button').removeAttr('data-order'); //reset } }); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button type="button" class="draggable-button"> <div>Some value<input type="hidden" name="row[][key1]"></div> <div data-value="1">Some value<input type="hidden" name="row[][key2]"></div> <div data-value="1">Some value<input type="hidden" name="row[][key3]"></div> <div data-value="1">Some value<input type="hidden" name="row[][key4]"></div> <div class="edit-row">Edit</div> <div class="remove-row">X</div> </button> <button type="button" class="draggable-button"> <div>Some value<input type="hidden" name="row[][key1]"></div> <div data-value="1">Some value<input type="hidden" name="row[][key2]"></div> <div data-value="1">Some value<input type="hidden" name="row[][key3]"></div> <div data-value="1">Some value<input type="hidden" name="row[][key4]"></div> <div class="edit-row">Edit</div> <div class="remove-row">X</div> </button> 

The problem wasn't in the code I posted. I forgot to mention that I made the buttons draggable. For that, I use a plugin, which prevented the click in some way.

Now debugging and trying to fix it, thanks for the help!

Answer 3

Please use it like this:

$(document).ready(function () {
// Remove row
$('.remove-row').on('click', function () {
    $('.remove-row').parent().remove();
});
});