Question

我想动态添加/删除div。我设法让添加按钮使用此代码：

$('#addSelector').live('click', function() {
$('<div id=' + c + ' class="title">...<input type="button" id="remSelector'+ c +'" value="Remove Selector"></div>').appendTo(addDivSelector);
c++;

所以它基本上添加了删除按钮，我希望它删除它的div（例如remSelector5删除id为5的div。

我对此代码的另一个问题是：我已设法使用以下代码动态添加/删除输入字段：

var i = $('#addinput p').size() + 1;
var addDiv = $('#addinput');
$('#addNew').live('click', function() {
$('<p> ... <input type="text" name="value' + i + '" placeholder="Value"/>&nbsp <input type="button" id="remNew" value="Remove Operator"/></p>').appendTo(addDiv);
i++;

这篇文章的第一个代码生成第二个代码（var声明除外）。例如，当我按下第二个或第三个div上带有id“addNew”的按钮时，它会在第一个div中生成一个新字段。我希望它在同一个div中生成一个新的输入字段，但我无法让它工作。

Answer 1

以下是我将如何解决您的第一个问题：

$('#addSelector').live('click', function() {
    $('<div id=' + c + ' class="title">...<input type="button" class="removeButton" id="remSelector'+ c +'" value="Remove Selector"></div>').appendTo(addDivSelector);
    c++;
});

addDivSelector.find("input.removeButton").live("click", function () {
    $(this).parent().remove();
});

这需要addDivSelector作为jQuery对象。

Answer 2

据我所知你想看到这样的东西：

$('.add-row').click(function() {
    var input = $('<input type="text" />');
    var btn = $('<input type="button" value="x" />');

    btn.click(function() {
        $(this).parent().remove();
    });

    var div = $('<div />');
    div.append(input).append(btn);    

    $('.container').append(div);
});

http://jsfiddle.net/inser/LHjx4/

Answer 3

很难理解你的需求，但这就是我所能提供的：

    var id = 0,
    textId = 0;

$("#magicButton").on("click", function () {
    id++;
    var content = 
        '<div id="someDiv_' + id + '" class="title">' +
    '<input type="button" data-id="' + id + '" value="remove" class="removeButton"/>' +
    '<input type="button" data-id="' + id + '" value="addText" class="addText"/>' + 
    '</div>';
    $("#someContainer").append(content);
    //bind event handlers:
    $(".removeButton").off("click").on("click", removeDiv);
    $(".addText").off("click").on("click", addText);

});

function removeDiv() {
    var id = $(this).data("id");
    $("#someDiv_" + id).remove();
}

function addText() {
    textId++;
    var id = $(this).data("id");
    var content = '<div id="txtContainer_' + textId + '"><input type="text" value="some text"/><input type="button" value="X" data-textid="' + textId + '" class="removeText"/></div>';
    $("#someDiv_" + id).append(content);
    $(".removeText").off("click").on("click", removeText);
}

function removeText() {
    var textId = $(this).data("textid");
    $("#txtContainer_" + textId).remove();
}

在JSFiddle

上查看

该codez实际上演示了如何在页面上使用动态元素以及如何摆脱不适合使用的.live()

如何在JavaScript中删除div？如何在同一个div中添加输入字段

3 个答案: