jquery selector inside a table td

Question

here is my html code wordpress that makes a table in my plugin dash page:

<table class="wp-list-table widefat fixed exams">

    <thead></thead>
    <tfoot></tfoot>
    <tbody id="the-list" data-wp-lists="list:exam">
        <tr class="alternate">
            <th class="check-column" scope="row">
                <input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
            </th>
            <td class="ID column-ID"></td>
            <td class="exam_name column-exam_name">

                this text is to be selected

                <span style="color:red"></span>
                <div class="row-actions">
                    <span class="subjects"></span>
                    <span class="settings"></span>
                    <span class="clone"></span>
                    <span class="users"></span>
                    <span class="uploads"></span>
                </div>
            </td>
            <td class="total_user column-total_user"></td>
            <td class="date_create column-date_create"></td>
            <td class="short_code column-short_code"></td>
        </tr>
        <tr></tr>
        <tr class="alternate"></tr>
        <tr></tr>
        <tr class="alternate"></tr>
        <tr></tr>
        <tr class="alternate"></tr>
    </tbody>

</table>

with my jquery code i want to select this text is to be selected only inside td:

$(".exam_cb").click(function() {

            $(this).parent("th").next("td").next("td").hide(); // hides td class exam_name
            $(this).parent("th").next("td").next("td").text().hide(); // not working
            $(this).parent("th").next("td").next("td").html().hide(); // not working
            $(this).parent("th").next("td").next("td").val().hide(); // not working
     });

what is wrong with me?

Answer 1

You need to select text node by filtering them by nodeType. and then wrap the content in dom element with css display none:

$(this).parent().siblings('.exam_name').contents().filter(function() {
    return this.nodeType == 3;
}).wrap('<span style="display:none"></style>');//wrap in span and hide the,

Working Demo

Answer 2

You cannot apply hide on text() - you apply it on an HTML Element

$(this).parent("th").next("td").next("td").hide();

Thats causing a JS Error and hence none of your other statements after that is working

and the same is true for val().hide() - A JS Error will be thrown

 $(".exam_cb").click(function() { var columnmTo=$(this).parent("th").next("td").next("td"); columnmTo.find('.selectedTest').addClass('highlight'); columnmTo.find('.error').hide(); columnmTo.find('.row-actions').hide(); }); 

 span.highlight { font-weight:bold; } span.error { font-weight:bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table class="wp-list-table widefat fixed exams"> <thead></thead> <tfoot></tfoot> <tbody id="the-list" data-wp-lists="list:exam"> <tr class="alternate"> <th class="check-column" scope="row"> <input class="exam_cb" type="checkbox" value="22" name="exam[]"></input> </th> <td class="ID column-ID"></td> <td class="exam_name column-exam_name"> <span class="selectedTest">this text is to be selected</span> <span class="error">Hello</span> <div class="row-actions"> <span class="subjects">a</span> <span class="settings">b</span> <span class="clone">c</span> <span class="users">c</span> <span class="uploads">d</span> </div> </td> <td class="total_user column-total_user"></td> <td class="date_create column-date_create"></td> <td class="short_code column-short_code"></td> </tr> <tr></tr> <tr class="alternate"></tr> <tr></tr> <tr class="alternate"></tr> <tr></tr> <tr class="alternate"></tr> </tbody> </table>