Question

Regarding the below code snippet i understand the bit but i have few confusion like

$(this).children().contents().wrap('<div>').parent().slideUp(function() {    
    $(this).closest('tr').remove();
});

1) children().contents() what it does.
2) wrap('<div>') what is wrapping and why div is required.
3) which one is parent parent() tr parent is table
4) what is the functionality of closest() how closest('tr') refer current tr?

i just do not understand the above line like

full code

<table border="1" width="600" cellspacing="0" cellpadding="0" id="test">
<tr>
    <td><b>First Name</b></td>
    <td><b>Last Name</b></td>
    <td><b>Address</b></td>
    <td><b>Town</b></td>

</tr>

<tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Address</td>
    <td>Town</td>
</tr>
<tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Address</td>
    <td>Town</td>
</tr>
<tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Address</td>
    <td>Town</td>
</tr>

$('#test tr:not(:first)').click(function() {           
    $(this).css("background-color","red");  

    $(this).children().contents().wrap('<div>').parent().slideUp(function() {    
        $(this).closest('tr').remove();
    });
});

Answer 1

1. children().contents() will return the content of each <td> for the clicked <tr>. According to your example, all tds contain text and so an array of TextNode will be returned.

2. wrap('<div>') it will wrap each text with a tag. <div> is not “required”, it’s a what you are wrapping your text with.

3. parent() it refers to the <div> since <div> is the parent for the content after wrapping.

4. closest() simply return the nearest <tr> which is the <tr> being clicked.