Question

我的插件将复制一个节点并将其附加到指定位置。它包括一个删除重复节点的选项。

示例：

$('#duplicateMe').duplicator( {
      copyToLocation:'#copy_to_here', 
      removeButton:'.removeDuplicateBtn'
    });

我正在寻找一种在我的插件中创建支票的方法，以确定clickButton在点击时的位置，并根据该项删除项目。

我的三个用例是这样的：

if ( defaultOptions.removeButton is the item duplicated ){ 
         ... is clicked, remove itself 
       }
if ( defaultOptions.removeButton is the child of item duplicated ){ 
         ... is clicked, remove its parent, in turn removing itself 
       }
if ( defaultOptions.removeButton is NOT the item duplicated && is NOT the child of the item duplicated ){ 
         ... is clicked, remove the last item duplicated 
       }

我可以创建两个单独的removeButtons。一个删除按钮可能位于重复节点之外，这将删除最后一个重复节点。第二个删除按钮可以在复制节点内创建，并可以自行删除。 但是，我认为最好只声明一个defaultOptions.removeButton，并且我的代码会检查它在点击时的位置。

removeButton当前删除了最后一个重复节点，无论哪个具有该类。这意味着无论我点击哪个removeButton，它都会删除最后一个重复的项目。它可能是重复的，也可能是重复的。它删除了最后一项。

我一直在用这种逻辑绞尽脑汁。我有什么想法可以实现这个吗？

以下是工作中的代码：duplicator.js at work in jsfiddle

如果单击“复制矩形”三次，则可以单击其中任何一个删除s，它将删除最后一个重复项目。我希望您能够单击idPrefix_2旁边的删除，它只删除idPrefix_2。或者，如果单击“删除最后一个矩形”，它将删除剩下的任何蓝色矩形（排列中的最后一个）。

Answer 1

复制项目时，请将班级duplicated添加到新元素。

if ($(this).is(".duplicated")) {
    $(this).remove();
} else {
    var dup = $(this).closest(".duplicated");
    if (dup.length) {
        dup.remove();
    } else {
        // remove last duplicated item
    }
}

Answer 2

您可以获取点击事件，然后获取点击的按钮，然后删除其父级确保在

中添加“e”

$(defaultOptions.removeButton).click(function(e){

var thisBtn = $(e.currentTarget);
thisBtn.parent(".theBlueSquareClass").remove();

示例：http://jsfiddle.net/NLfsw/4/

使用一个选择器并使用jQuery检查Click Clicked的位置

2 个答案: