title: remove an append with click
body: <p>I have the following code:
  Html:</p>
  
  <pre><code>    &lt;body&gt;
        &lt;div&gt;
          &lt;p  class='Go'&gt;
            Create
          &lt;/p&gt;
          &lt;p class='Del'&gt;
          Remove
          &lt;/p&gt;
        &lt;/div&gt;
     &lt;/body&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.Go{
      background-color: lime;
      width:45px;
      text-align: center;
  }
  .bad{
      background-color:Red;
      width: 45px;
      text-align:center;
  }
  .Del{
      background-color:pink;
      width: 55px;
  }
  </code></pre>
  
  <p>Javascript(Jquery)</p>
  
  <pre><code>$(document).ready(function(){
      $('.Go').click(function(){
         $('div').append("&lt;p class='bad'&gt;Delete&lt;/p&gt;");
      });
      $('.bad').click(function(){
         $(this).remove();
      });
      $('.Del').click(function(){
         $('.bad').remove();
      })
  });
  </code></pre>
  
  <p>The idea was that every time I clicked the "create", it would add a new "delete". </p>
  
  <p>Every time I clicked the "remove", all the "delete"'s would go away, and every time I clicked a "delete", that single delete would be removed. </p>
  
  <p>All but the last one works. Any ideas what mistake am I making here?</p>