Delete object with javascript

I have designed a small panel using the following code, which will display the content to the user by clicking on it:

 <div class="MyPanel">

        <ul class="body_panel">
            <li class="title_panel">

                <h5>title</h5>

<span class="fas fa-circle-chevron-right icon-title-right_panel"></span>    //Icon call from fontawesome
<span class="fas fa-circle-chevron-down icon-title-down_panel"></span>     //Icon call from fontawesome 

                <ul class="box-contect_panel">
                    <li class="contect_panel">

                        <h1>contect</h1>

                    </li>
                </ul>
            </li>
        </ul>

    </div>

CSS:

        .MyPanel ul li {
            cursor: pointer;
            position: relative;
        }
        
        .MyPanel ul li .icon-title-right_panel,
        .MyPanel ul li .icon-title-down_panel {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 30px;
        }
        
        .MyPanel ul li .icon-title-down_panel {  //Hide icon down
            display: none;
        }

Script:

$('.body_panel').find('li').click(function() {

            if (find('ul')) {   //****** This line of code is wrong ******

                $(this).children('.icon-title-right_panel').remove();
                $(this).children('.icon-title-down_panel').toggle();
            } else {
                $(this).children('.icon-title-right_panel').toggle();
                $(this).children('.icon-title-down_panel').remove();
            }
        });

        $('.MyPanel').find('li').click(function(evt) {
            evt.stopPropagation();
            $(this).children('ul').slideToggle();
        });

By clicking on the title of any icon on the right side, it will be removed. and it appears by clicking again.

As I specified in the script code; What alternative code should I write to delete the icon on the right by clicking on the title and the icon on the bottom appears instead?