title: How to remove a pop-up div appended with .append() method using jQuery?
body: <p>I am trying to figure out how can I remove a pop-up div element using the <code>.remove()</code> jQuery method. I have a div which is appended to the #main div when the I click on an element with class ".popUpTrigger". Then I would like to remove this appended HTML code when I click on the pop-up itself.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
    &lt;html lang="en"&gt;
     &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html"/&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;script src="js/jquery-1.8.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jscript.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
      &lt;title&gt;Title&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="main"&gt;
         &lt;button class="popUpTrigger"&gt;Click to trigger the popUp!&lt;/button&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt; 
  </code></pre>
  
  <p>My jscript.js:</p>
  
  <pre><code>    function popUpCreate(idToAppend, popUpCode) {
         $(function() {
              $(idToAppend).append(popUpCode);
         });
       }
  
  
      $(function() {
          $(".popUpTrigger").click(function() {
          popUpCreate("#main", "&lt;div class='popUpBg'&gt;&lt;div class='popUpItSelf'&gt;Hello!&lt;/div&gt;&lt;/div&gt;");
           });
       });
  
    $(function() {
      $(".popUpBg").click(function() {
           $(".popUpBg").remove();
         });
     });
  </code></pre>
  
  <p>The style.css file:</p>
  
  <pre><code>      .popUpBg {
      position:fixed;
      z-index:999999;
      top:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.8);
      cursor:pointer;
        }
  
        .popUpItSelf {
      position:fixed;
      z-index:9999999;
      width:400px;
      height:200px;
      text-align:center;
      top:50%;
      left:50%;
      margin-left:-401px;
      margin-top:-301px;
      background:white;
      border: 1px solid black;
      font-size: 4em;
      color:black;
      font-weight:bold;
      padding:200px;
           }
  </code></pre>
  
  <p>But it does not work, I want the pop-up to be removed when I click on the <code>.popUpBg</code> (which is the pop-up background).</p>
  
  <p>How can I achieve that?</p>