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   lt div class  answers  gt       lt ul gt           lt li gt               lt input id  answer  type  radio  onclick  feedback  THE MESSAGE HTML    gt  lt label gt Label lt  label gt           lt  li gt       lt  ul gt   lt  div gt    JavaScript   function feedback message            answer   live  click   function                     feedback   remove                     answer   live  click   function                     answers   append   lt div id  feedback  gt   message   lt  div gt

User · Answer

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

User · Answer

you could use replaceAll instead of remove and append  replaceAll

User · Answer

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   lt div id  feedback  gt   message   lt  div gt           Ok  per your comment  try taking out the onclick part of the  lt a gt  element and instead  putting this in a document ready   handler       answer   live  click  function                             feedback   remove                             answers   append   lt div id  feedback  gt   message   lt  div gt

User · Answer

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   lt div id  feedback  gt     message         counter     lt  div gt        counter

User · Answer

I would do something like     documento  on  click     answer   function       feedback  hey there

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

Examples related to jquery

Examples related to append

Examples related to bind

Examples related to live