Question

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

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

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

P.S。使用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相关联。

Answer 2

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

Answer 3

以下是另一种方法：

fiddle

<强>代码

    $(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/

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

5 个答案: