javascript - 类上的 jQuery 单击事件仅触发第一个元素

Question

只有第一个元素(第一个按钮)才会从“remove-row”类中获取删除事件

我的 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>

我的 JavaScript/jQuery:

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

我希望它不会重复，因为我尝试过 this和其他一些问题，但没有成功。

Answer 1

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

会做，请参阅此 Plunk 。请注意，您必须准确单击 X(行)才能使其正常工作。