How to cancel an html element created using html() with JQuery

#1

Hi all.
Using hover method, I am trying to show an icon that shows which repo a specific portfolio is stored (e.g CodePen, GitHub). The user will hover over the “portfolio caption”, and an image will appear on the screen.

The hover is working: When the mouse is in, I add a class changing the background colour and add an element html(’’).
On the other hand, when I leave the portfolio caption, I am not able to remove the element created previously.
It might me a bit confused but it was the only solution I found at the moment.

I want to remove the element .

HTML
42%20pm

JS
$(’.portfolio-caption’).hover(function() {

//Check the href of the element
var codeIcon = $(this).prev().attr(‘href’);

//Check if the project is stored in CodePen
if(codeIcon.indexOf(“codepen”)){

$(this)
  .addClass('portfolio-caption-hover')
  .html('<i class="fa fa-free-code-camp fa-4x" aria-hidden="true"></i>');

}
}, function() {
$(this)
.removeClass(‘portfolio-caption-hoover’)
.remove(‘i’);
});

#2

Consider using mouseover and mouseleave instead.

#3

The main issue is to remove the element i and not the mouseover()

#4

I noticed a couple of typos. On line 39, you’ve got a semicolon that’s breaking your function chain. Also, the class in removeClass has an extra o in it, portfolio-caption-hoover. Fixing those two things made the function behave as expected.

#5

That’s correct. I just fixed these typos. Thanks. :slight_smile:
The main problem is still about the .remove(‘i’) that’ s not working (line 41). It was created in the previous function (line 33).
I want to remove this element, then the caption will be the same format that it was before the hover happen.

#6

Try this to get your .remove() working.
$(this).children("i").remove();

When you add the icon it overwrites the html you had there previously so when you remove it you are left with a void at the moment.

#7

The element ‘i’ was removed. I can only see the void caused by the html() now. I will have to add the default caption again. Thank you.

#8