Question

我试图获得一个关闭按钮来关闭2个LI，但它们在2个不同的UL中 - 由jQuery动态生成的LI。当有人输入项目/数量并点击添加时，它们会被渲染为新的LI但是当它们包含定价时，它会呈现在不同的LI中因此，按下项目/数量中的“X”以关闭特定的LI不会影响与该项目对应的价格。

“清除”按钮也适用于单个LI

有关解决此问题的任何建议，而无需在价格LI上添加“X”？

I hope my explanation makes sense, you can see the code here

$(document).ready(function () {
    // Adds typed items and qty to the list 
    $('#add').on('click', function () {
        var item = $('#list').val();
        var qty = $('#qty').val();
        $('#list-a').append('<li>' + '<div class="delete"></div>' + qty + ' ' + item + '</li>');

        var price = $('#price').val();
        $('#list-b').append('<li>' + '$' + price + '</li>');

        // Resets input field to empty and focus
        $('#list').val('').focus();
        $('#qty, #price').val('');
    });

    // Fires Add to List button when enter is clicked
    $('#list, #qty, #price').keyup(function (event) {
        if (event.keyCode === 13) {
            $('#add').click();
        }
    });

    // Deletes/fades out 'li' when X is clicked
    $('#list-a').on('click', '.delete', function () {
        var listItem = $(this).closest('li');
        listItem.fadeOut(500, function () {
            listItem.remove();
        });
    });

    // Clear all items on the list and focus back on new shopping item
    $('#clear').on('click', function () {
        var li = $('li');
        li.fadeOut(500, function () {
            $(li).remove('li');
        });
        $('#list').val('').focus();
    });
});

Answer 1

您需要从下一个li删除具有相同兄弟索引的ul：

$('#list-a').on('click', '.delete', function () {

    var listItem = $(this).closest('li'),
        index = listItem.index();

    listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
    .fadeOut(500, function () {
        $(this).remove();
    });

});

演示：http://codepen.io/anon/pen/emdyqX

Answer 2

$('#list-a').on('click', '.delete', function() {
    var listItem = $(this).closest('li');
 var ind = listItem.index();

    listItem.fadeOut(500, function() {
        listItem.remove();
    });

$('#list-b').find('li').eq(ind).fadeOut(500, function() {
        $(this).remove();
    });


});

http://codepen.io/anon/pen/OPRzKx

按钮在2个不同的jquery中定位2＆＃39;

2 个答案:

演示：http://codepen.io/anon/pen/emdyqX