In a container I have text and img tag, how can I get only the text with js or jquery

Question

I need to get only the text inside this container, but I have a <img> with the text, I tried and tried but I don't know how to get only the text. If you see the code below, I only want to get the text inside the <th> without the <img> tag. Here is the code:

<table>
    <thead>
        <tr>
            <th id="user_head_id">
                ID<img src="images/DownArrow16A.ico" class="order_arrows"></img>
            </th>
            <th id="user_head_name">
                User<img src="images/DownArrow16I.ico" class="order_arrows">
            </th>
            <th id="user_head_mail">
                E-mail<img src="images/DownArrow16A.ico" class="order_arrows">
            </th>
            <th id="user_head_nif">
                DNI<img src="images/DownArrow16A.ico" class="order_arrows">
            </th>
            <th id="user_head_permission">
                Permissions<img src="images/DownArrow16A.ico" class="order_arrows">
            </th>
            <th id="user_head_ban">
                Ban code<img src="images/DownArrow16A.ico" class="order_arrows">
            </th>
        </tr>
    </thead>
    <tbody id="seleccionable">
        <tr class="tr_users">
            <td class="user_id">'.$myarray[0].'</td>
            <td class="user_name">'.$myarray[1].'</td>
            <td class="user_mail">'.$myarray[2].'</td>
            <td class="user_nif">'.$myarray[3].'</td>
            <td class="user_permission">'.$myarray[4].'</td>
            <td class="user_ban">'.$myarray[5].'</td>';
        </tr>
    </tbody>
</table>

Answer 1

Use text() method for getting the text inside an element.The text( ) method gets the combined text contents of all matched elements.

Working Demo

 $('th').each(function(){ console.log($(this).text()) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th id="user_head_id"> ID<img src="images/DownArrow16A.ico" class="order_arrows"></img> </th> <th id="user_head_name"> User<img src="images/DownArrow16I.ico" class="order_arrows"> </th> <th id="user_head_mail"> E-mail<img src="images/DownArrow16A.ico" class="order_arrows"> </th> <th id="user_head_nif"> DNI<img src="images/DownArrow16A.ico" class="order_arrows"> </th> <th id="user_head_permission"> Permissions<img src="images/DownArrow16A.ico" class="order_arrows"> </th> <th id="user_head_ban"> Ban code<img src="images/DownArrow16A.ico" class="order_arrows"> </th> </tr> </thead> <tbody id="seleccionable"> <tr class="tr_users"> <td class="user_id">'.$myarray[0].'</td> <td class="user_name">'.$myarray[1].'</td> <td class="user_mail">'.$myarray[2].'</td> <td class="user_nif">'.$myarray[3].'</td> <td class="user_permission">'.$myarray[4].'</td> <td class="user_ban">'.$myarray[5].'</td>'; </tr> </tbody> </table> 

Answer 2

You can do that, cuting the string:

 $('thead th').each(function(){ var text = $(this).text().split('<img')[0]; console.log(text); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th id="user_head_id"> ID<img src="images/DownArrow16A.ico" class="order_arrows"></img> </th> <th id="user_head_name"> User<img src="images/DownArrow16I.ico" class="order_arrows"> </th> <th id="user_head_mail"> E-mail<img src="images/DownArrow16A.ico" class="order_arrows"> </th> <th id="user_head_nif"> DNI<img src="images/DownArrow16A.ico" class="order_arrows"> </th> <th id="user_head_permission"> Permissions<img src="images/DownArrow16A.ico" class="order_arrows"> </th> <th id="user_head_ban"> Ban code<img src="images/DownArrow16A.ico" class="order_arrows"> </th> </tr> </thead> <tbody> </tbody> </table> 

But the better aproach is you putting your text in a p or a span tag and setting an id to it.