Мой плагин дублирует узел и добавляет его в указанное место. Он включает в себя возможность удаления дублированного узла.
Пример:
$('#duplicateMe').duplicator( {
copyToLocation:'#copy_to_here',
removeButton:'.removeDuplicateBtn'
});
Я ищу способ создать проверку внутри моего плагина, чтобы определить, где находится removeButton, когда он щелкнут, и удалить элемент на основе этого.
Мои три варианта использования будут примерно такими:
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 при работе в jsfiddle
Если вы нажмете "дублировать прямоугольник" три раза, вы можете щелкнуть любой из них, удалив s, и он удалит последний дублированный элемент. Я хочу, чтобы вы могли щелкнуть удаление рядом с idPrefix_2 и удалить только idPrefix_2. Или, если вы нажмете "удалить последний прямоугольник", он удалит любой синий прямоугольник (последний в строке вверх).
вы можете получить событие клика, а затем нажать кнопку, нажав кнопку, а затем удалить родительский элемент. Убедитесь, что вы добавили "e" в
$(defaultOptions.removeButton).click(function(e){
var thisBtn = $(e.currentTarget);
thisBtn.parent(".theBlueSquareClass").remove();
пример: http://jsfiddle.net/NLfsw/4/
Когда вы дублируете элемент, добавьте класс, duplicated
в новый элемент.
if ($(this).is(".duplicated")) {
$(this).remove();
} else {
var dup = $(this).closest(".duplicated");
if (dup.length) {
dup.remove();
} else {
// remove last duplicated item
}
}
$('body').on('click', defaultOptions.removeButton, function(){ if ( $( this ).parent().hasClass('duplicated') ) { $(this).parent().remove(); }else { $(defaultOptions.copyToLocation).children().last().remove(); } });
Однако мне интересно, смогу ли я сделать это, не добавляя новый класс к дублирующемуся элементу.
$(this).parent()
. Но использовать класс проще.