title: Add/remove child elements
body: <p>I am using javascript and jQuery to dynamically add and delete new elements to and from an existing <code>&lt;div&gt;</code>.</p>
  
  <p>Adding a new element is working fine, but when I click on 'delete' to remove the element, I get the Main Container object and also the child element object within the button exists and was clicked.</p>
  
  <p>Now the problem comes when I try to delete the element, I am getting the object till the html table control that contains the controls, but do not get the div that is containing the table.</p>
  
  <p><strong>Note : the div contains the table is the child div/element.</strong></p>
  
  <p>Javascript</p>
  
  <pre><code>var ab = '&lt;table rules="none" width="100%"&gt;'+
  '&lt;tr&gt;'+
  '&lt;td class="optHdBg"&gt;'+
  '&lt;a&gt;&lt;img src="themes/theme_blog/images/icons/delete.png" name="delete"  önclick="javascript:remove_block(this);"/&gt;&lt;/a&gt;'+
  '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
  
  function add()
  {
    var lstChild = $("#contControls").children().last();
    var containerElement = document.getElementById("contControls");   
    var newElement = document.createElement("div");
    $(newElement).addClass("optionPane");   
    newElement.innerHTML = ab;
    document.getElementById("contControls").appendChild(newElement);
  }
  
  function remove_block(obj)
  {
    var mainContainer = $(obj).parents("div #contControls");
    var mySelf = obj.parentNode.parentNode.parentNode.parentNode.parentNode;
    mainContainer.removeChild(mySelf);
  }
  </code></pre>
  
  <p>The problem occurs with <code>mySelf</code> control that is not accessing the div control that contains the table, due to that delete operation doesn't work.</p>
  
  <p>Html Code</p>
  
  <pre><code>&lt;div id="contControls"&gt;
    &lt;div class="optionPane"&gt;
      &lt;table rules="none" width="100%"&gt;
        &lt;tr&gt;
          &lt;td class="optHdBg"&gt;
            &lt;a&gt;
              &lt;img src="themes/theme_blog/images/icons/delete.png" name="delete"  önclick="javascript:remove_block(this);"/&gt;
            &lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm not able to get the <code>&lt;div&gt;</code> element having class <code>optionPane</code>; whenever I try to target the parent of the <code>&lt;table&gt;</code> I get the <code>&lt;div&gt;</code> with the id <code>contControls</code>.</p>