title: how to javascript popup div close button working and div delete by javascript
body: <p>I've come to with you for 2 help.</p>
  
  <p>1) I've put a popup div into my HTML page by javascript. Here is the <a href="http://abidhasan.zxq.net/firm/jobs.html" rel="nofollow">website</a>. If you click the edit icon(at right side and center of the webpage), a popup box will be come. If you click the outside of that popup box, it will close. I put a close icon in the popup from. I want when anyone click on that close icon, the popup box will close too. I've put a javascript for that too. But, when I click the close icon, popup box will close, but a transparent background(div class="dimmer") will still stay unless clicking any side of the window. How can I solve this?</p>
  
  <p>2) You see that there are two section of job details list. There are a remove icon also. I want that when I click the remove icon, the div beside that remove-icon will be deleted. How can I do that by javascript?</p>
  
  <p>Necessary HTML code:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
          &lt;header class="page_title"&gt;
              &lt;h1&gt;All Jobs&lt;/h1&gt;
          &lt;/header&gt;
          &lt;article class="information"&gt;
              &lt;table class="table"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Job ID&lt;/th&gt;
                          &lt;th&gt;Start Date&lt;/th&gt;
                          &lt;th&gt;Deadline&lt;/th&gt;
                          &lt;th&gt;Finish Date&lt;/th&gt;
                          &lt;th&gt;Budget($)&lt;/th&gt;
                          &lt;th&gt;Client ID&lt;/th&gt;
                          &lt;th&gt;Bidder ID&lt;/th&gt;
                          &lt;th&gt;Number of Supervisor&lt;/th&gt;
                          &lt;th&gt;Name of Supervisor&lt;/th&gt;
                          &lt;th&gt;Odesk Profile ID&lt;/th&gt;
                          &lt;th&gt;Owner Type&lt;/th&gt;
                          &lt;th class="icon"&gt;
  
                              &lt;a href="#"&gt;&lt;img src="images/edit-icon.jpg" width="41" height="39" alt="Edit" title="Edit Job" class="icon_first" id="opener" /&gt;&lt;/a&gt;
                              &lt;a href="#"&gt;&lt;img src="images/delete.png" width="41" height="39" alt="Delete" title="Delete Job" /&gt;&lt;/a&gt;
  
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;1&lt;/td&gt;
                          &lt;td&gt;06/05/2013&lt;/td&gt;
                          &lt;td&gt;11/05/2013&lt;/td&gt;
                          &lt;td&gt;10/05/2013&lt;/td&gt;
                          &lt;td&gt;100&lt;/td&gt;
                          &lt;td&gt;John_01&lt;/td&gt;
                          &lt;td&gt;abid&lt;/td&gt;
                          &lt;td&gt;2&lt;/td&gt;
                          &lt;td&gt;
                              1. Dolar
                              2. Soshi
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;a href="#"&gt;See the job at Odesk&lt;/a&gt;                                    
                          &lt;/td&gt;
                          &lt;td&gt;Member&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;div id="lightbox"&gt;
                  &lt;section id="form"&gt;
                      &lt;header class="titlebar"&gt;
                          &lt;a href="#"&gt;&lt;img src="images/close-icon.png" width="33" height="32" alt="close" title="Close" id="closer" class="close" /&gt;&lt;/a&gt;
                          &lt;h1&gt;Edit Form&lt;/h1&gt;
  
                      &lt;/header&gt;
                      &lt;form id="form" name="form" method="post" action="#"&gt;
                          &lt;label&gt;Job ID:&lt;/label&gt;
                          &lt;input type="text" name="job_id" id="job_id" placeholder="1" /&gt;
                          &lt;label&gt;Start Date:&lt;/label&gt;
                          &lt;input type="date" name="start_date" id="start_date" placeholder="mm/dd/yy"&gt;
                          &lt;label&gt;Deadline:&lt;/label&gt;
                          &lt;input type="date" name="deadline" id="deadline"&gt;
                          &lt;label&gt;Finish Date:&lt;/label&gt;
                          &lt;input type="date" name="finish_date" id="finish_date"&gt;
                          &lt;label&gt;Budget($):&lt;/label&gt;
                          &lt;input type="number" name="Budget" id="Budget" placeholder="100"&gt;
                          &lt;label&gt;Client ID:&lt;/label&gt;
                          &lt;input type="text" name="client_id" id="client_id" placeholder="1" /&gt;
                          &lt;label&gt;Bidder ID:&lt;/label&gt;
                          &lt;input type="text" name="bidder_id" id="bidder_id" placeholder="1" /&gt;
                          &lt;label&gt;Number of Supervisor:&lt;/label&gt;
                          &lt;select title="Supervisor"&gt;
                              &lt;option&gt;1&lt;/option&gt;
                              &lt;option&gt;1&lt;/option&gt;
                              &lt;option&gt;2&lt;/option&gt;
                              &lt;option&gt;3&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;label&gt;Odesk Profile ID:&lt;/label&gt;
                          &lt;input type="text" name="odesk_id" id="odesk_id" placeholder="https://www.odesk.com/jobs/Frontend-engineer"&gt;
                          &lt;label&gt;Owner Type:&lt;/label&gt;
                          &lt;input type="radio" name="owner_type" id="owner_type" value="member" /&gt;&lt;label class="text_label"&gt;Member&lt;/label&gt;
                          &lt;input type="radio" name="owner_type" id="owner_type" value="employee" /&gt;&lt;label class="text_label"&gt;Employee&lt;/label&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;input type="submit" name="submit" id="submit" value="Submit"&gt;
                      &lt;/form&gt;
                  &lt;/section&gt;
              &lt;/div&gt;
          &lt;/article&gt;
          &lt;article class="information"&gt;
              &lt;table class="table"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Job ID&lt;/th&gt;
                          &lt;th&gt;Start Date&lt;/th&gt;
                          &lt;th&gt;Deadline&lt;/th&gt;
                          &lt;th&gt;Finish Date&lt;/th&gt;
                          &lt;th&gt;Budget($)&lt;/th&gt;
                          &lt;th&gt;Client ID&lt;/th&gt;
                          &lt;th&gt;Bidder ID&lt;/th&gt;
                          &lt;th&gt;Number of Supervisor&lt;/th&gt;
                          &lt;th&gt;Name of Supervisor&lt;/th&gt;
                          &lt;th&gt;Odesk Profile ID&lt;/th&gt;
                          &lt;th&gt;Owner Type&lt;/th&gt;
                          &lt;th class="icon"&gt;
  
                              &lt;a href="#"&gt;&lt;img src="images/edit-icon.jpg" width="41" height="39" alt="Edit" title="Edit Job" class="icon_first" /&gt;&lt;/a&gt;
                              &lt;a href="#"&gt;&lt;img src="images/delete.png" width="41" height="39" alt="Delete" title="Delete Job" /&gt;&lt;/a&gt;
  
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;1&lt;/td&gt;
                          &lt;td&gt;06/05/2013&lt;/td&gt;
                          &lt;td&gt;11/05/2013&lt;/td&gt;
                          &lt;td&gt;10/05/2013&lt;/td&gt;
                          &lt;td&gt;100&lt;/td&gt;
                          &lt;td&gt;John_01&lt;/td&gt;
                          &lt;td&gt;abid&lt;/td&gt;
                          &lt;td&gt;2&lt;/td&gt;
                          &lt;td&gt;
                              1. Dolar
  
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;a href="#"&gt;See the job at Odesk&lt;/a&gt;                                    
                          &lt;/td&gt;
                          &lt;td&gt;Member&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/article&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Necessary CSS code:</p>
  
  <pre><code>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      border: 0 none;
      font-size: 100%;
      margin: 0;
      padding: 0;
      vertical-align: baseline;
  }
  a {
      text-decoration: none;
  }
  
  .clear { clear: both; }
  /*html5 display rule*/
  article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
      display: block;
  }
  
  h1 {
      font-size: 26px;    
  }
  
  body {
      background: #fff;
      font-family: sans-serif;
      color: #333;
      font-size: 12px;
      line-height: 1em;
  }
  .wrapper {
      width: 1000px;
      margin: 0 auto;
      position: relative;
      background: #fff;
  }
  
  header.page_title {
      background: #F2F2F0;
      border-radius: 7px 7px 7px 7px;
      color: #333;
      padding: 20px;
      margin: 20px 0 0 0; 
  }
  #form {
      width: 800px;
      margin: 20px 0 0 2px;   
  }
  #form label { 
      display: block; 
      text-align: left; 
      width: 200px; 
      float:left; 
      margin: 5px 0 0 20px;
      font-size: 15px; 
  }
  #form label.text_label {
      width: auto;
      display: inline;
      margin: 5px 20px 15px 10px; 
  }
  #form input, #form select {
      float:left; 
      font-size:13px;
      margin: 0 0 10px 0; 
      padding: 0; 
  }
  #form input[type=text], #form input[type=date], #form input[type=number], #form input[type=email] { 
      width: 500px; 
      height: 27px; 
  }
  #form select {
      width: 500px;
      height: 27px;
      line-height: 27px;
      padding: 3px 0 0 0;
  }
  #form input[type="radio"] {
      margin: 5px 0 0 0;  
  }
  #form textarea { 
      float: left; 
      width: 500px; 
      height: 82px; 
      margin: 0 0 10px 0; 
      padding: 0; 
      font-size: 13px; 
  }
  #form input[type="submit"] { 
      margin: 10px 0 20px 220px; 
      width: 100px; 
      height: 30px; 
      background: #00AEEC; 
      text-align: center; 
      line-height: 30px; 
      color: #FFFFFF; 
      font-size: 13px; 
      font-weight: bold; 
      border: none;
      box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), 0 1px 0 #9FE662 inset; 
      border-radius: 5px;
      cursor: pointer;
  }
  #form input[type="submit"]:hover { 
      background: #33BEF0;
  }
  
  article.information {
      position: relative; 
  }
  table {
      border-collapse: collapse;
      border-spacing: 0;
      float: left;
  }
  .table { 
      font-family: sans-serif; 
      font-size: 13px; 
      margin: 25px 0 0 0; 
      width: 700px; 
      text-align: center; 
      border-collapse: collapse;
      border-spacing: 0;
      float: left;
  }
  .table th { 
      font-size: 13px; 
      font-weight: normal; 
      padding: 10px 15px; 
      border-right: 1px solid #EDEDEB; 
      border-left: 1px solid #EDEDEB; 
      color: #042D40; 
      background: #F2F2F0;
  }
  .table td { 
      padding: 10px 5px; 
      border-right: 1px solid #EDEDEB; 
      border-left: 1px solid #EDEDEB; 
      border-bottom: 1px solid #EDEDEB; 
      color: #669; 
  }
  .table a { 
      color: #669; 
  }
  .table a:hover { 
      color: #009; 
  }
  .icon {
      float: right;
      width: 130px;
  }
  .table th.icon {
      clear: both;
      background: #fff;
      margin: 0;
      padding: 0;
      border: none;
  }
  
  .icon img {
      float: left;    
  }
  .icon_first {
      margin: 0 10px 0 10px;  
  }
  
  #lightbox{
      visibility: hidden;
      position: absolute;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.13);
      border-radius: 11px 11px 10px 10px;
      box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.13);
      color: #333;
      z-index:100;
      width: 800px;
      float: left;
      top: 0;
      left: 100px;
  }
  
  .dimmer{
      background: #000;
      position: absolute;
      opacity: .5;
      top: 0;
      z-index:99;
  }
  #lightbox .titlebar {
      background-color: #00AEEC;
      border-radius: 10px 10px 0 0;
      box-shadow: 0 0 0 1px #00AEEC;
      color: #FFFFFF;
      font-size: 18px;
      padding: 17px 20px 13px;
      margin: -20px 0 0 -3px;
      width: 95.2%;   
  }
  #lightbox .close {
      float: right;
      margin: -10px 10px 0 0;
  }
  </code></pre>
  
  <p>Javascript Code:</p>
  
  <pre><code>var opener = document.getElementById("opener");
  var lightbox = document.getElementById("lightbox");
  
  
  opener.onclick = function(){
  
      var lightbox = document.getElementById("lightbox"),
          dimmer = document.createElement("div");
  
      dimmer.style.width =  window.innerWidth + 'px';
      dimmer.style.height = window.innerHeight + 'px';
      dimmer.className = 'dimmer';
  
      dimmer.onclick = function(){
          document.body.removeChild(this);   
          lightbox.style.visibility = 'hidden';
      }
  
      document.body.appendChild(dimmer);
  
      lightbox.style.visibility = 'visible';
  
      return false;
  }
  
  
  var closer = document.getElementById("closer");
  closer.onclick = function closepopup()
  {
    lightbox.style.visibility = 'hidden';
  
  }
  </code></pre>