为什么这个jQuery删除功能不起作用？

Question

我正在尝试学习使用jQuery动态生成html。 我一直在研究以下分叉代码。

http://jsfiddle.net/plusxultra/4r22b/5/

$(function () {
    var myDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function () {
        $('<label for="p_scents"><input type="text" id="c_name" size="20" name="c_name_' + i + '" value="" placeholder="c_name" /><input type="text" id="c_acc" size="20" name="c_acc_' + i + '" value="" placeholder="c_acc" /><input type="text" id="c_desc" size="20" name="c_desc_' + i + '" value="" placeholder="c_desc" /></label><a href="#" id="removeButton">Remove</a><br>').appendTo(myDiv);
        i++;
        return false;
    });

    $('#removeButton').live('click', function () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

我能够动态创建其他输入，这符合我的目的，但由于某种原因，删除功能不起作用。 我确信我做错了什么，我试图调试一段时间没有用，但没有用。 有人能解决这个问题吗？

ps使用jquery-1.6.4.min.js

Answer 1

演示

问题是你没有添加<p>元素。

只是用

$('<p><label for="p_scents"><input type="text" id="c_name" size="20" name="c_name_' + i + '" value="" placeholder="c_name" /><input type="text" id="c_acc" size="20" name="c_acc_' + i + '" value="" placeholder="c_acc" /><input type="text" id="c_desc" size="20" name="c_desc_' + i + '" value="" placeholder="c_desc" /></label><a href="#" id="removeButton">Remove</a></p>').appendTo(myDiv);

注意<p>在开始和</p>末。

Offtopic：你为什么要用这些标签？ 应使用标签将某些内容与输入相关联，但您使用它们将某些输入与div相关联。

Answer 2

$（this）指的是按钮，我认为这不是你的目标。

Answer 3

这是另一种方法：

小提琴

码

    $(function () {
        var myDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

//here you will have html which will be added every time the add button is clicked
//place it inside the div so it will be easier to find which input to remove
    var newInput='<div>'+myDiv.html()+ '<a href="#" id="removeButton">Remove</a>'+'</div>';
        $('#addScnt').on('click', function () {
            $(newInput).appendTo(myDiv);
            i++;
            return false;
        });

        $('#removeButton').on('click', function () {
//removing only the closest div
            $(this).closest('div').remove();
            return false;
        });
    });

Answer 4

这里是演示小提琴http://jsfiddle.net/4r22b/9/

将链接的id属性更改为class，因为id被认为是唯一的，并且还放置了您要查找的<p> 。

<a href="#" class="removeButton">Remove</a>

$('.removeButton').live('click', function () {

        $(this).parents('p').remove();

    return false;
});

Answer 5

您的原始代码存在一些问题。 最值得注意的是，您没有增加会导致问题的id属性，因为这些应该是唯一的。 如果增加id属性，则需要更改实时语句。 最后删除不起作用，因为你错过了

appendTo函数中的标签。 这是工作和更新的小提琴。

http://jsfiddle.net/VVnMu/3/