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

Question

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

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

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

附:使用jquery-1.6.4.min.js

Answer 1

Demo

问题是您没有添加 <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 相关联。