javascript - 按下按钮时删除父 div

Question

尝试创建一个动态按钮系统来添加/删除点击输入。我有 addButton 工作，但没有 deleteButton。我错过了什么？

$(document).ready(function() {
    var maxFields = 20;
    var addButton = $('#plusOne');
    var deleteButton = $('#minusOne');
    var wrapper = $('#userNumbers');
    var fieldInput = '<div><input type="text" name="persons" id="persons"/></div>';
    var x = 1;

    $(addButton).click(function () {
        if (x < maxFields) {
            x++;
            $(wrapper).append(fieldInput);
        }
    });

    $(deleteButton).click(function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="plusOne">+</button>
    <button type="button" id="minusOne">-</button>

    <div id="userNumbers">
       <p>
        <input type="text" id="person" name="person">
        </p>
    </div>

Answer 1

问题是，$(this)删除按钮处理程序内部指的是减号按钮。那个减号按钮不在每个项目中(它在顶部。并且没有父 div)，因此您需要以其他方式引用要删除的元素。在我下面的例子中，我选择了最后一个 <div>在$(wrapper) :

$(document).ready(function() {
    var maxFields = 20;
    var addButton = $('#plusOne');
    var deleteButton = $('#minusOne');
    var wrapper = $('#userNumbers');
    var fieldInput = '<div><input type="text" name="persons" id="persons"/></div>';
    var x = 1;

    $(addButton).click(function () {
        if (x < maxFields) {
            x++;
            $(wrapper).append(fieldInput);
        }
    });

    $(deleteButton).click(function(e) {
        e.preventDefault();
        $(wrapper).find('div:last').remove();
        x--;
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="plusOne">+</button>
    <button type="button" id="minusOne">-</button>

    <div id="userNumbers">
       <p>
        <input type="text" id="person" name="person">
        </p>
    </div>