Removing an element via an outer element
I need to remove an element via an outer element. In the following example, the user will focus on the .content element, then display the .delete element. By clicking on this .delete element, you need to delete the selected .content element.
My problem is how to identify the element. I tried to give the element an id / class, but as I click on the delete element, the blur function (which is needed for the case where the user is not deleting but clicking elsewhere) first removes the class.
Perhaps my attempt (by adding a temporary class) is the wrong way ...
HTML:
<div class="delete" style="display: none;">Delete</div>
<div class="content" contenteditable="true"></div>
<div class="content" contenteditable="true"></div>
<div class="content" contenteditable="true"></div>
<div class="content" contenteditable="true"></div>
JS:
$('.delete').on('click', function () {
$('.active').remove();
});
$('.content').on('focus', function () {
$(this).addClass('active');
$('.delete').show();
});
$('.content').on('blur', function () {
$(this).removeClass('active');
$('.delete').hide();
});
Update:
http://jsfiddle.net/ze1kvh0g/9/
I think I need a blur function: Perhaps the user is doing something completely different after focusing the .content element (i.e. scrolling or clicking on something else on the website). In this case, focus is lost and the active class must be removed.
Am I wrong?
Update 2:
This is a working solution (a combination of Pr0gr4mm3r and Moshtaf answers): http://jsfiddle.net/ze1kvh0g/13/ Don't know if the code can be optimized to get a little less ...
var activeElement, isOnDeleteButton = false;
$(".delete").hover(function () {
isOnDeleteButton = true;
}, function () {
isOnDeleteButton = false;
});
$('.delete').on('click', function () {
if (activeElement) {
activeElement.remove();
delete activeElement;
}
$(this).hide();
});
$('.content').on('focus', function () {
activeElement = $(this);
$('.delete').show();
});
$('.content').on('blur', function () {
if (!isOnDeleteButton) $('.delete').hide();
});
source to share
Try the following:
var isOnDeleteButton = false;
$( ".delete" ).mouseenter(function() {isOnDeleteButton = true;});
$( ".delete" ).mouseleave(function() {isOnDeleteButton = false;});
$('.delete').on('click', function () {
$('.active').remove();
$('.delete').hide();
});
$('.content').on('focus', function () {
$(this).addClass('active');
$('.delete').show();
});
$('.content').on('blur', function () {
if (!isOnDeleteButton){
$(this).removeClass('active');
$('.delete').hide();
}
});
source to share
The easiest way is to just temporarily save your item.
This way you can also avoid polling your elements with temporary css classes if not required for styling.
var activeElement;
$('.delete').on('click', function () {
if(activeElement) {
activeElement.remove();
delete activeElement;
}
$(this).hide();
});
$('.content').on('focus', function () {
$(this).addClass('active');
$('.delete').show();
activeElement = $(this);
});
$('.content').on('blur', function () {
$(this).removeClass('active');
$('.delete').hide();
});
source to share
You can remove your function blur
:
$('.delete').on('click', function () {
$('.active').remove();
// $('.delete').hide(); -> only if you want to hide the Delete button every time
});
$('.content').on('focus', function () {
$('.active').removeClass('active');
$(this).addClass('active');
$('.delete').show();
});
I removed the function blur
because when the user clicks on another item, all active items will be disabled.
source to share
try this way, no need to define "blur", just remove the previous active and add the active to the current content. and thus it becomes simple
$('.delete').on('click', function () {
$('.active').remove();
$('.delete').hide();
});
$('.content').on('focus', function () {
$('.content').removeClass('active');
$(this).addClass('active');
$('.delete').show();
});
source to share