Question

I'm working on a plugin that will duplicate an item. I also want this plugin to give the option to remove the last item duplicated. For example, the user clicks their button (could be an anchor if they want) and it duplicates the item, appends an ID with an incremented integer (e.g. duplicated_node_2) and then places the duplicated item in a specified location. Once this has been placed there, the user can click a separate button (or anchor, or whatever) and it would remove that last item duplicated.

Using a selector with the .click inside the plugin will hardcode the item. I'd rather make it so the plugin will remove the last thing duplicated. I also don't want to have to use something like $('div #duplicated_node_2').last().remove() or even something similar.

I've tried thinking of maybe putting the counter variables into an array and have them reference the last item, but that seems a bit too complex for what I'm trying to do. Does anyone have any ideas of how I could generalize this process?

Here's part of the code. It deals with the duplication process and appending to the default copy to location:

(function ( $ ) {
    $.fn.myDuplicatingFunction = function( options ){
              ... 
              ... setting up the defaultOptions and checking if the idPrefix is undefined or not ... 
              ... [omitted from post]
              ...
var nodeToClone = this;
        var n = 1; // counter declared
        $(defaultOptions.duplicateButton).click(function(){
            n++; // increment that counter
            var clonedNode = nodeToClone.clone(true); // clone the node and assign to new var
            clonedNode.attr('id',defaultOptions.idPrefix + '_' + n); // update attr ID with the new one
            $(clonedNode).appendTo(defaultOptions.copyToLocation);  // append to location
        });
/// trying to figure out the removal process
$(defaultOptions.removeButton).click(function(){
            $(defaultOptions.copyToLocation).last().remove();
        });
    }
}(jQuery));

Thanks in advance for any of your feedback.

Note: I'm still fairly new with jQuery and plugin creation. If you have positive feedback about code organization or efficiency tips, feel free to chime in as well.

Edit: I left out the () for the last function. Thanks for the catch. I actually had the correct code in my IDE.

Was it helpful?

Solution 4

Solved.

$(defaultOptions.removeButton).click(function(){
           $(defaultOptions.copyToLocation).children().last().remove();
       });

OTHER TIPS

last is a function. So a little change in the code might do the trick:

$(defaultOptions.removeButton).click(function(){
        $(defaultOptions.copyToLocation).children().last().remove();
    });

The idea is to get the children of the repository of items you got... then the last one... then remove...

.last() is a method

$(defaultOptions.removeButton).click(function(){
   $(defaultOptions.copyToLocation).last().remove();
                                        ^^
});

You can try to explode each of the clonedNode's id in $(defaultOptions.copyToLocation), and grab it by the higher number, than you'll now the last one!

Or simply remove the last children of that, like

$(defaultOptions.copyToLocation).children().last().remove();
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top