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

Question

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>');
    });
};

Answer 1

If I understand your question correctly, I've made a fiddle that has this working correctly. This issue is with how you're assigning the event handlers and as others have said you have over riding event handlers. The current jQuery best practice is to use on() to register event handlers. Here's a link to the jQuery docs about on: link

Your original solution was pretty close but the way you added the event handlers is a bit confusing. It's considered best practice to not add events to HTML elements. I recommend reading up on Unobstrusive JavaScript.

Here's the JavaScript code. I added a counter variable so you can see that it is working correctly.

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

var counter = 0;

function feedback(message) {

  $('#feedback').remove();

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

  counter++;    
}

Answer 2

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>');
                 });

Answer 3

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

Answer 4

I would do something like:

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

Answer 5

you could use replaceAll instead of remove and append replaceAll