Question

尝试创建动态按钮系统以添加/删除点击输入。我有addButton工作，但没有deleteButton。我想念什么？

ISR

$(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--;
    });

});

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>

Answer 2

您也可以使用子节点使用纯JS来完成此操作。：D 有时，纯JS比JQ更好

说明：

删除是一项新功能。这是一种快捷方式，使删除元素变得更简单，而不必寻找父节点。不幸的是，它在旧版本的Internet Explorer中不可用，因此，除非您不想支持此浏览器，否则必须使用 removeChild 。

$(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();
        var myNode = document.getElementById("userNumbers");
        i=myNode.childNodes.length - 1;
        if(i>=0){
        myNode.removeChild(myNode.childNodes[i]);
        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 3

尝试以下解决方案，我也关心后端，因为您必须将数据发送给后端开发人员，因此您必须为输入字段（例如name =“ person []”）指定阵列名称。无论如何，您也可以尝试此解决方案。

$(document).ready(function(){
   var static_html = '<input  type="text" name="person[]" class="input_fields" />';
   $("#plus").click(function(){
       if($(".input_fields").length < 20 )
         $("#dynamic_field_container").append(static_html);
   });
    $("#minus").click(function(){
       if($(".input_fields").length > 1 )
         $(".input_fields:last").remove();
       else
         alert("This is default field so u can't delete");
   });

});

.input_fields{
   display:block;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="fa fa-plus fa-4x" id="plus"> </span>&nbsp;&nbsp;&nbsp;&nbsp;
<span class="fa fa-minus fa-4x" id="minus"> </span>

<div id="dynamic_field_container">
    <input type="text" name="person[]" class="input_fields" />
</div>

删除按钮上的父div

3 个答案: