delete closest class - jQuery
<p>I have a table formatted html query to bind datas within a div actually. My html query is like,</p>

<pre><code>var myTable = &lt;table&gt;
    &lt;tr&gt;
       &lt;td class='deleteMe'&gt;
            &lt;table&gt;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td class='close'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
       &lt;/td&gt;
       &lt;td class='deleteMe'&gt;
            &lt;table&gt;&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td class='close'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
       &lt;/td&gt;
       &lt;td class='deleteMe'&gt;
            &lt;table&gt;&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td class='close'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
       &lt;td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>here class <code>close</code> contains a <code>delete</code> icon. so when I click this delete icon, I can remove the complete <code>td</code> like,</p>

<pre><code>$(document).on('click', '.close', function () {                
            $(this).closest('table').remove();
        });
</code></pre>

<p>but what I want here is, I need to get the complete structure except the <code>deleted one</code>. that is similar to,</p>

<pre><code>var myTable = &lt;table&gt;
    &lt;tr&gt;
       &lt;td class='deleteMe'&gt;
            &lt;table&gt;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td class='close'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
       &lt;/td&gt;
       &lt;td class='deleteMe'&gt;
            &lt;table&gt;&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td class='close'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
       &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Why am trying to do like this here is, after binding this <code>myTable</code> to my <code>div</code> and when I delete <code>2</code> from here, its removed but it shows the empty space between <code>1 and 3</code>. I dont want this, thats what am trying to get the structure except the deleted one and rebind it to the same div again.</p>

<p>Can anyone help me here, thanks in advance </p>
