Question

我在表单中使用Foundation Accordion，在'Add New'按钮上我需要添加一个新元素，然后使用'Remove'按钮删除手风琴的那部分。

<ul class="accordion" data-accordion>
    <li class="accordion-navigation">
        <a href="#panel1">
            <div class="left">
                New Panel
            </div>
        </a>
        <div id="panel1" class="content">
            <label name="title">Title</label>
            <input type="text" name="title[]">
        </div>
    </li>
</ul>
<div class="right">
    <button class="background-green" id="new"><em class="fa fa-plus"></em> Add New Rank</button>
</div>

到目前为止的Jquery：

$(document).ready(function() {
    // Add New Accordion Element
    var max_fields = 10;
    var i = 1;

    $('#new').on('click', function(e) {
        e.preventDefault();
        if(i < max_fields) {
            i++;
            $('.accordion').append('<li class="accordion-navigation"><a href="#panel' + i + '"><div class="left">New Panel</div><div class="right"><button class="background-red remove"><em class="fa fa-minus"></em> Remove</button></div></a><div id="panel' + i +'" class="content"><label name="title">Title</label><input type="text" name="title[]"></div></li>');
        }
    });

    // Remove Accordion Element
    $('button.remove').click(function(e) {
        e.preventDefault();
        $(this).parents('li.accordion-navigation').remove();
        i--;
    });
});

但是，当添加按钮工作时，每当我尝试删除元素时它都会失败。甚至使用控制台。记录是否识别按钮点击不起作用。

Answer 1

请尝试使用此jQuery选择器：

// Remove Accordion Element

$(document).on('click', '.remove', function(e) {
    e.preventDefault();
    $(this).parents('li.accordion-navigation').remove();
    i--;
});

将监听新创建的按钮（页面加载后）。

其他说明

另外，我会选择更改此行：

$(this).parents('li.accordion-navigation').remove();

到此：

$(this).closest('li').remove();

.closest()可以更好地查找祖先，只需查找li或只是寻找.accordion-navigation，效果会比查找li.accordion-navigation更好。

此外，e.preventDefault()在这里是多余的，因为您的button没有附加任何默认操作/事件。

使用jQuery

1 个答案: