Question

I have a table formatted html query to bind datas within a div actually. My html query is like,

var myTable = <table>
    <tr>
       <td class='deleteMe'>
            <table><tr><td>1</td><td class='close'></td></tr></table>
       </td>
       <td class='deleteMe'>
            <table><tr><td>2</td><td class='close'></td></tr></table>
       </td>
       <td class='deleteMe'>
            <table><tr><td>3</td><td class='close'></td></tr></table>
       <td>
    </tr>
</table>

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

$(document).on('click', '.close', function () {                
            $(this).closest('table').remove();
        });

but what I want here is, I need to get the complete structure except the deleted one. that is similar to,

var myTable = <table>
    <tr>
       <td class='deleteMe'>
            <table><tr><td>1</td><td class='close'></td></tr></table>
       </td>
       <td class='deleteMe'>
            <table><tr><td>2</td><td class='close'></td></tr></table>
       </td>
    </tr>
</table>

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

Can anyone help me here, thanks in advance

Answer 1

$(document).on('click', '.close', function () {                
            $(this).parents('.deleteme').remove();
        });

After removal of deleted element do like

<script>var data='';
  $(document).on('click', '.close', function () {  data='';            
                $(this).parents('.deleteMe:first').remove();
                $(".deleteMe").each(function(){
                data+=$(this).html();
                });
                });

It will store the html of remaining deleteme in var data;