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

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

很难理解您的需求，但这就是我可以提供的:

    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()