javascript - 使用 Jquery 删除文本输入框

Question

请看看这个

http://jsfiddle.net/tt13/CFbpt/

我需要的是，

1. 当用户单击 + 按钮时，添加新的文本输入
2. 当文本框数达到 3 时隐藏第一个文本框的 + 按钮（用户最多可以添加 2 个文本框），当文本框数 < 3 时取消隐藏
3. 当用户单击 x 按钮时，删除父文本框（位于按钮左侧）

我的 + 按钮效果很好：它可以动态添加文本框。但是 x（删除）按钮没有。我错过了什么？

Answer 1

是的，这表明您当前正在设置您在按钮实际存在之前删除事件。而是将删除处理程序放在添加按钮事件中：

http://jsfiddle.net/CFbpt/1/

但实际上，您应该将代码放入问题中，以便其他人可以找到它...

$(document).ready(function(){

    var addCvBtn    = $(".addCvBtn"),
    rmCvBtn    = $(".rmCvBtn"),
    rcmText     = $(".rcmText"),
    btncount    = 0,
    inputhtml = '<div class="cvInputContainer withRemBtn"><input placeholder="CV Linkini daxil edin" name="cvlinks[]" type="text" /><button class="btn btn-medium btn-danger rmCvBtn " type="button"><i class="icon-remove icon-white"></i></button></div>';

addCvBtn.click(function(){
        if(btncount == 3)  addCvBtn.hide();
        else
        {
            $(this).parent().parent().append(inputhtml);
            btncount++;
            rmCvBtn    = $(".rmCvBtn");
            $(".withRemBtn").on('click', ".rmCvBtn", function(){
               addCvBtn.show();
               $(this).parent().remove(); //EDITED
               btncount--;
               alert('deleted');
            });
        }        
    });



 });

编辑：我认为您可能一直在尝试实现的 .on() 更动态的使用是： $(document).ready(function(){

    var addCvBtn    = $(".addCvBtn"),
    rmCvBtn    = $(".rmCvBtn"),
    rcmText     = $(".rcmText"),
    btncount    = 0,
    inputhtml = '<div class="cvInputContainer withRemBtn"><input placeholder="CV Linkini daxil edin" name="cvlinks[]" type="text" /><button class="btn btn-medium btn-danger rmCvBtn " type="button"><i class="icon-remove icon-white"></i></button></div>';

addCvBtn.click(function(){
        if(btncount == 3)  addCvBtn.hide();
        else
        {
            $(this).parent().parent().append(inputhtml);
            btncount++;
            rmCvBtn    = $(".rmCvBtn");
        }        
    });


 $(document).on('click', ".withRemBtn .rmCvBtn", function(){
               addCvBtn.show();
               $(this).parent().remove(); //EDITED
               btncount--;
               alert('deleted');
            });  
 });

Answer 2

您需要在 中声明您delete的事件click。在您编写代码时，您首先设置删除事件，然后添加它。它不会起作用，因为 btn delete 不会在添加 'enter code heredelete' 事件的步骤中退出