通过外部元素删除元素

Question

我需要通过外部元素删除元素。在以下示例中，用户将关注.content元素，然后显示.delete元素。通过点击.delete-element应该删除焦点.content-element。

我的问题是如何识别元素。我试图给这个元素一个id/class，但是当我点击delete元素时，blur函数（这是用户不删除的情况下需要的，但是在其他地方单击时）需要先删除该类。

也许我试图（通过增加临时类）是走错了路......

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(); 
}); 

http://jsfiddle.net/ze1kvh0g/

更新：

http://jsfiddle.net/ze1kvh0g/9/

我想我需要模糊功能：也许用户正在做的事情聚焦。内容元素之后完全地不同（即滚动或点击任何其他网站）。在这种情况下，焦点会丢失，主动类不得不被移除。

我错了吗？

更新2：

这是（Pr0gr4mm3r的组合和Moshtaf的答案）工作方案：http://jsfiddle.net/ze1kvh0g/13/ 不知道该代码可以优化变得有点小...

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(); 
}); 

Answer 1

试试这个：

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(); 
    } 
}); 

Check JSFiddle Demo

Answer 2

您可以移除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(); 
}); 

我删除了blur功能，因为当用户点击另一个元素，所有的有源元件将被禁用。

Answer 3

尝试这种方式，不需要定义“模糊”只需删除以前的活动，并将活动添加到当前内容。和这样它变得简单

$('.delete').on('click', function() { 

     $('.active').remove(); 
     $('.delete').hide(); 
    }); 

    $('.content').on('focus', function() { 

    $('.content').removeClass('active'); 
    $(this).addClass('active'); 
    $('.delete').show(); 

}); 

http://jsfiddle.net/ze1kvh0g/8/

Answer 4

Simpliest的方法是只临时保存你的元素。
通过这种方式，您还可以避免使用临时css-classes来污染您的元素，如果样式不需要的话。

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(); 
});