Удалить тег после висения

Question

Я использую следующий код для добавления строки в моем подменю:

$("li.mega-menu-megamenu a").hover(function(){ 
    $("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child"); 
}); 

Его прекрасно работает fine.But вопрос в том, что я хочу, чтобы удалить этот тег, когда нет парения.

Я пробовал: $("li.mega-menu-megamenu a").unbind('hover'); Но при этом он не будет добавлять теги html вообще.

Как удалить строку при отсутствии наведения на меню?

Answer 1

Вы можете использовать MouseOut событие для этого

$("li.mega-menu-megamenu a").mouseout(function() { 
    $(".remove").remove(); 
}); 
$("li.mega-menu-megamenu a").mouseenter(function() { 
    $("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child"); 
}); 

Другим возможным решением является, вместо добавления и удаления элемента можно просто скрыть/показать.

$(document).ready(funnction() { 
    $("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child"); 
    $(".remove").hide(); 
    $("li.mega-menu-megamenu a").mouseout(function() { 
     $(".remove").hide(); 
    }); 
    $("li.mega-menu-megamenu a").mouseenter(function() { 
     $(".remove").show(); 
    }); 
}); 

Answer 2

Я бы выбрал для скрытия/показа, чтобы вы не продолжали добавлять/удалять из DOM.

// Add the element to the DOM once and then hide it 
var $removeElement = $("<div class='remove'><hr /></div>") 
    .insertAfter("#mega-menu-primary-2 li:last-child") 
    .hide(); 

// On mouseover we show the $removeElement and mouseout will hide it 
$("li.mega-menu-megamenu a") 
    .hover(function(){ $removeElement.fadeIn(); }, 
      function() { $removeElement.fadeOut(); } 
    ); 

Я использовал fadeIn/fadeOut, но вместо этого вы можете использовать show/hide, если хотите.

Answer 3

Вы можете передать 2 функции для зависания. Второй вызов будет вызываться, когда мышь покидает элемент.

$("li.mega-menu-megamenu a").hover(function() { 
    $("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child"); 
}, 
function() { 
    $(".remove").remove(); 
}); 

Answer 4

Другой способ:

$('li.mega-menu-megamenu a').on({ 
    'mouseenter':function(){ 
     $("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child"); 
    },'mouseleave':function(){ 
     $(".remove").remove(); 
    } 
});