如何查找父div的属性

Question

我正在使用追加添加按钮。如何找到它的父div id（removeID）值，这样我只能删除那个特定的部分？

$("#CCcontainer").append("<div id ="+removeID +" ><div class =\"form-group col-sm-10\"></div><div class =\"form-group col-sm-2\"><button type=\"button\" id=\"removeCard\"  class=\"btn btn-warning form-control\">Remove Card</button></div></div>");

$(document).on('click','#removeCard',function () 
{
    uniqueId--;
    alert("Removing" +("#CCPanel" + uniqueId) );

    $("#CCPanel" + uniqueId).remove();
    $("#removeCard"+ uniqueId).remove();
});

上面的代码总是从底部删除按钮。如果我点击中间的删除按钮，则最后一个被删除。我试图看看我是否可以跟踪点击按钮的ID，以便我只能删除该特定部分。

有什么办法可以保持序列顺序吗？就像我添加4个部分并删除第二个然后再添加一个时间我应该看到序列4不是5。

转到我的jsFiddle，然后点击 [添加另一张卡片按钮] （橙色按钮）以查看其工作原理。

Answer 1

好的，我已经解决了你的问题。您不需要.parent()或.closest()。您只需要保留对顶级容器的引用，然后根据单击按钮上的id的提取，您可以简单地删除以该ID号结尾的容器的所有子项。

这就是我的所作所为：

$('#AddCC').click(function () {

    uniqueId++;

    var container = $("#CCcontainer"),
        copyDiv = $("#CCPanel").clone(),
        divID = "CCPanel" + uniqueId,
        removeID = "RemoveCard" + uniqueId;

    copyDiv.attr('id', divID);

    container.append(copyDiv);
    container.append("<div id =" + removeID + " ><div class =\"form-group col-sm-10\"></div><div class =\"form-group col-sm-2\"><button id=\"btn" + removeID + "\" type=\"button\" class=\"btn btn-warning form-control\">Remove Card</button></div></div>");

    $('#' + divID).find('input,select').each(function () {
        $(this).attr('id', $(this).attr('id') + uniqueId);
    });

    $("#" + removeID).find("button").on("click", function () {
        var id = $(this).attr("id").replace("btnRemoveCard", "");
        container.find("div[id$='" + id + "']").remove();
    });
});

的 See working jsFiddle demo 的

更新

现在已经更新了小提琴以包含将保存所使用面板的唯一ID的代码。它包含一个隐藏的输入字段，只存储一个id数组。由于第一个面板已经在屏幕上，因此默认为1。

<input id="hiddenStoredPanelsArray" type="hidden" value="[1]" />

在更新的JavaScript中，您会注意到我在那里留下了console.log语句，因此您可以在添加和删除面板时查看数组会发生什么。

$('#AddCC').click(function () {

    uniqueId++;

    var container = $("#CCcontainer"),
        hidden = $("#hiddenStoredPanelsArray"),
        storedPanels = hidden.length ? $.parseJSON(hidden.val()) : null,
        copyDiv = $("#CCPanel").clone(),
        divID = "CCPanel" + uniqueId,
        removeID = "RemoveCard" + uniqueId;

    console.log(storedPanels);
    storedPanels.push(uniqueId);
    hidden.val(JSON.stringify(storedPanels));
    console.log(storedPanels);

    copyDiv.attr('id', divID);

    container.append(copyDiv);
    container.append("<div id =" + removeID + " ><div class =\"form-group col-sm-10\"></div><div class =\"form-group col-sm-2\"><button id=\"btn" + removeID + "\" type=\"button\" class=\"btn btn-warning form-control\">Remove Card</button></div></div>");

    $('#' + divID).find('input,select').each(function () {
        $(this).attr('id', $(this).attr('id') + uniqueId);
    });

    $("#" + removeID).find("button").on("click", function () {
        var id = parseInt($(this).attr("id").replace("btnRemoveCard", "")),
            hidden = $("#hiddenStoredPanelsArray"),
            storedPanels = hidden.length ? $.parseJSON(hidden.val()) : null,
            index = storedPanels == null ? -1 : storedPanels.indexOf(id);

        console.log(storedPanels);
        if (index > -1)
            storedPanels.splice(index, 1);
        console.log(storedPanels);

        container.find("div[id$='" + id.toString() + "']").remove();
        hidden.val(JSON.stringify(storedPanels));
    });
});

Answer 2

我觉得最合适的（如果我理解的话）它的上下文是最接近的函数，它获得匹配传递的选择器的第一个父

.closest("#removeId");