Question

I am using javascript and jQuery to dynamically add and delete new elements to and from an existing <div>.

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.

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.

Note : the div contains the table is the child div/element.

Javascript

var ab = '<table rules="none" width="100%">'+
'<tr>'+
'<td class="optHdBg">'+
'<a><img src="themes/theme_blog/images/icons/delete.png" name="delete"  önclick="javascript:remove_block(this);"/></a>'+
'</td></tr></table>';

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);
}

The problem occurs with mySelf control that is not accessing the div control that contains the table, due to that delete operation doesn’t work.

Html Code

<div id="contControls">
  <div class="optionPane">
    <table rules="none" width="100%">
      <tr>
        <td class="optHdBg">
          <a>
            <img src="themes/theme_blog/images/icons/delete.png" name="delete"  önclick="javascript:remove_block(this);"/>
          </a>
        </td>
      </tr>
    </table>
  </div>
</div>

I’m not able to get the <div> element having class optionPane; whenever I try to target the parent of the <table> I get the <div> with the id contControls.

Answer 1

Working Demo

If you’re going through the trouble of importing jQuery, you may as well use it. It simplifies all of the DOM manipulation that you are trying to accomplish, and your code boils down to simply this (note that javascript string can’t span multiple lines like you are doing without using + for concatenation):

var ab = '<table rules="none" width="100%">'
 + '<tr><td class="optHdBg"><a>'
 + '<img src="themes/theme_blog/images/icons/delete.png" name="delete" />'
 + '</a></td></tr></table>';

$(document).ready(function() {
    $(document).on('click', 'img[name="delete"]', function() {
        remove_block(this);
    });        
});

function add() {
    $("<div class='optionPane'></div>").html( ab ).appendTo("#contControls");
}

function remove_block(obj) {
    // remove the entire optionPane <div>
    $(obj).closest('div.optionPane').remove();
}​

---

Also, you should note that in the line $(document).on('click' you can (and should) replace document with whichever static parent element you are adding the dynamic elements to (probably #contControls, but I can’t see your HTML); this provides better performance, because events don’t have to bubble as far up the DOM.