Почему это работает так нелогично?

[jaroslav.tavgen]

Красный квадрат - часть спана с классом "parent". Почему же, если я навожу мышкой на красный квадрат, то он пропадает?

<span class="parent">Наведите мышкой сюда<br></span>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function removeSquare()
{
$(this).find(".kvadrat").remove();
}

function addSquare()
{
    $(this).append ( "<span style='display:inline-block;width: 50px;height: 50px;background-color:red' class='kvadrat'></span>" );
    $(this).on("mouseout", removeSquare);
}
$ ( ".parent" ).on ( "mouseover", addSquare );
</script>

[j0hnik]

function removeSquare()
{
$(this).find(".kvadrat").remove();
}

function addSquare()
{
    $(this).append ( "<span style='display:inline-block;width: 50px;height: 50px;background-color:red' class='kvadrat'></span>" );
}
$ ( ".parent" ).one( "mouseover", addSquare );

[Sigizmund2012]

jaroslav.tavgen,
вместо mouseover и mouseout используйте события mouseenter и mouseleave