add and remove child elements

Hello Friends,

I am working with HTML,javascript and jquery in my code, dynamically add and delete the new elements to the existing "div".

Adding 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.

To Add element.

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

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


please guide me.
Thanks.

Tags: Javascript, HTML, jQuery