Question

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

我的问题是如何识别元素。我试图给元素一个id / class，但是当我点击delete-element时，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/

我认为我需要模糊功能：在聚焦.content-element（即滚动或点击网站的任何其他内容）之后，用户可能正在做一些完全不同的事情。在这种情况下，焦点会丢失，必须删除活动类。

我错了吗？

更新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

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

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

Answer 3

您可以删除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 4

尝试这种方式，无需定义＆＃34;模糊＆＃34;只需删除上一个活动内容并将当前内容添加到活动这样就变得简单了

  $('.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/

通过外部元素删除元素

4 个答案: