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

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 .


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

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

//Check if the project is stored in CodePen

  .html('<i class="fa fa-free-code-camp fa-4x" aria-hidden="true"></i>'); 

}, function() {

Consider using mouseover and mouseleave instead.

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

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.

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.

Try this to get your .remove() working.

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.

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.