JS - Unable to bind dynamic element to existing radio button

Question

$(document).ready(function () {
   debugger;

    $('#IsThisTheQuestion_0').on('click', onChangeIsFire);
    $('#IsThisTheQuestion_1').on('click', onChangeIsFire);
        onChangeIsFire();
});

function onChangeIsFire()
{   
    if ( $("#IsThisTheQuestion_0" ).is(":checked") ) {  //YES
        onChangeIsFireYes()
    }
    if ( $("#IsThisTheQuestion_1" ).is(":checked") ) {  //NO
        onChangeIsFireNo()
    }
}

function onChangeIsFireYes()
{
    showHideFormField ("NextQuestion", false)
    //show text
    $('#IsThisTheQuestion').append(`<div id="myText" class="inLineText" style="margin-top: 20px; font-weight: bold;"> <span>{{ snippets["MyFirstText"] }}</span></div>`);
    $("#NextQuestion").on('click',onChangeNextQuestion);
    onChangeNextQuestion();
}

function onChangeIsFireNo()
{
    showHideFormField ("NextQuestion", true)
    
    $("#NextQuestion").on('click',onChangeNextQuestion);
    onChangeNextQuestion();
    // show/hide message
    $("#IsThisTheQuestion_1").on("click", "#myText", function (){
        debugger;
         $(this).remove();
    });
}

Hi

I have a powerportal website so the code inside double curly braces is liquid code, which basically contains the text.

A div '#myText' is dynamically created when radio button: IsThisTheQuestion is set to Yes (#IsThisTheQuestion_0). The dynamic div should be removed when radio button: IsThisTheQuestion is set to No (#IsThisTheQuestion_1)

since '#myText' is a dynamic element, I am trying to bind it to the 'No' radio button. But the code below doesnt work... The element is not being removed

        $("#IsThisTheQuestion_1").on("click", "#myText", function (){
            debugger;
             $(this).remove();
        });

As the element has a class, I have been able remove "#myText" using either of the statments below But this time understandably they are only removed when I click on the text itself.

How can I remove the div/text when I click No?

Any suggestions? Thanks

    $(document).on('click', '.inLineText', function(){//works when clicked on the text
                $(".inLineText").remove();  
    });

    $('body').on('click', '.inLineText', function(){//works when clicked on the text
                    $(".inLineText").remove();  
    });

$(document).on('click', '.inLineText', function(){//works when clicked on the text
            $(".inLineText").remove();  
});

$('body').on('click', '.inLineText', function(){//works when clicked on the text
                $(".inLineText").remove();  
});