title: How to remove an appended element with Jquery and why bind or live is causing elements to repeat
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>The HTML</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>function feedback(message)
  {
      $('#answer').live('click', function()
      {
          $('#feedback').remove();
      });
  
      $('#answer').live('click', function()
      {
          $('.answers').append('&lt;div id="feedback"&gt;'+message+'&lt;/div&gt;');
      });
  };
  </code></pre>