使用 jQuery 添加和删除基础手风琴元素

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.[=19= 执行得更好]

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

使用 jQuery 添加和删除基础手风琴元素

Add and Remove Foundation Accordion Elements with jQuery

jquery

accordion

zurb-foundation