如何查找父div的属性

我正在使用append添加一个按钮。 如何找到其父div id（removeID）值，以便我只删除该特定部分？

$("#CCcontainer").append("
Remove Card
"); $(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("
Remove Card
"); $('#' + 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演示

UPDATE

现在已经更新了小提琴，以包含将保存所用面板的唯一ID的代码。 它包含一个隐藏的输入字段，它只存储一个id数组。 由于第一个面板已经在屏幕上，因此默认为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("
Remove Card
"); $('#' + 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");