Question

我有这个代码，我用来附加一些输入+一个按钮来删除添加的输入。我已经设置了一个计数器来限制添加的输入数量为5.我想要达到的目的是：当我点击删除按钮时，它会删除附加元素并减少计数器

$(function($) {
var i = 1;
$("#btn_add").on("click",addAnotherPool);

    function deletePool(){
        this.parentNode.remove(this);
        i--;
    }

    function addAnotherPool() {
        if (i < 5) {
            var html = '<div><input name="srv[]" id="srv_'+i+'" type="text"><button id="btn_del" name="pool_btn_add" onclick="deletePool()">Delete</button></div>';
            $("#first_member").append(html);
        }
        i++;
        return false;
    }
});

当我运行此代码时，我在控制台上收到此错误：

未捕获的ReferenceError：未定义deletePool

你能告诉我为什么会出现这个错误吗？我怎样才能做到这一点？

Answer 1

问题是deletePool是在函数中定义的，这意味着它只是一个临时函数。你必须让deletePool接受一个要删除的对象的参数，而不是像这样的html onclick：

onclick="deletePool(this)"

这里修改了deletePool函数：

function deletePool(elm){
    elm.parentNode.remove(elm);
}

Answer 2

有多个错误：

var i = 1;  // declare global this variable

function deletePool(obj) { // declare global this function and use the this obj passed
  obj.parentNode.remove(obj);
  i--;
}

$(function () {
  $("#btn_add").on("click",addAnotherPool);

  function addAnotherPool() {
    if (i < 5) {
      var html = '<div><input name="srv[]" id="srv_'+i+'" type="text"><button id="btn_del" name="pool_btn_add" onclick="javascript:deletePool(this)">Delete</button></div>';
      $("#first_member").append(html);
      i++;
    }
    return false;
  }
});

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>


<div id="first_member">

</div>
<p><br/></p>
<button id="btn_add" onclick="">btn_add</button>

onclick删除节点并减少计数器

2 个答案: