通過外部元素刪除元素

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