[jquery] How to remove an appended element with Jquery and why bind or live is causing elements to repeat

Now I know this basic question has been asked before, but I must be doing something wrong. I know that an appended element must bound before I can do anything to it. However, try as I might I can't get it to work.

I am pulling in a message and displaying when people click a radio select. When ever I try to bind the new element, it stacks in odd ways. It will start to stack the elements. eg- [Click 1]message 1, [Click 2] message 1 and 2 and so on.

I have tried a whole bunch of different ways to bind it. My hope was the remove would strip #feedback and then create and bind the next message. I must be doing something terribly wrong. I know this is very similar to other posts, but I went through all of them and was not able to find a clear enough answer to help. Thank you in advance.

The HTML

<div class="answers">
    <ul>
        <li>
            <input id="answer" type="radio" onclick="feedback('THE MESSAGE HTML')"><label>Label</label>
        </li>
    </ul>
</div>

JavaScript:

function feedback(message)
{
    $('#answer').live('click', function()
    {
        $('#feedback').remove();
    });

    $('#answer').live('click', function()
    {
        $('.answers').append('<div id="feedback">'+message+'</div>');
    });
};

you could use replaceAll instead of remove and append replaceAll

Do you have multiple Radio Buttons on the page..

Because what I see is that you are assigning the events to all the radio button's on the page when you click on a radio button

The live function is registering a click event handler. It'll do so every time you click the object. So if you click it twice, you're assigning two click handlers to the object. You're also assigning a click handler here:

onclick="feedback('the message html')";

And then that click handler is assigning another click handler via live().

Really what I think you want to do is this:

function feedback(message)
{
    $('#feedback').remove();

    $('.answers').append('<div id="feedback">'+message+'</div>');
}

Ok, per your comment, try taking out the onclick part of the <a> element and instead, putting this in a document.ready() handler.

$('#answer').live('click',function(){
                     $('#feedback').remove();
                     $('.answers').append('<div id="feedback">'+message+'</div>');
                 });

I would do something like:

$(documento).on('click', '#answer', function() {
  feedback('hey there');
});