如何找到父div的属性 [英] How to find attribute of parent div

问题描述

我正在使用append添加一个按钮.如何找到其父div ID(removeID)值，以便仅删除该特定部分?

I am adding a button using append. How can find its parent div id (removeID) value so I can remove only that particular section?

$("#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，以便仅删除该特定部分.

The above code is removing the button always from bottom. If I clicked on remove button in the middle, last one is getting deleted. I am trying to see if I can track the id of the clicked button so I can remove only that specific section.

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

Is there any way I can always maintain the sequence order? Like if I add 4 sections and removed second and then add one more time I should see sequence 4 not 5.

转到我的 jsFiddle 并单击 [添加另一张卡按钮] (橙色按钮)查看其工作原理.

Go to my jsFiddle and click [Add Another Card button] (Orange Button) to see how it works.

推荐答案

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

Ok I've fixed your issue. You don't need .parent() or .closest(). You simply needed to retain a reference to your top level container and then based on the extraction of the id on the button that was clicked, you can simply remove all children of the container that end with that id number.

这就是我所做的:

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

查看有效的jsFiddle演示

更新

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

See working jsFiddle demo

UPDATE

The fiddle now has been updated to include code that will save the unique ids of the panels that are used. It includes a hidden input field that simply stored an array of the ids. It's defaulted to 1 since the first panel is already on the screen.

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

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

In the updated JavaScript you'll notice that I left console.log statements in there so you can see what happens to the array as you add and remove panels.

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

这篇关于如何找到父div的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！