从所有锚标签中删除图像标签

Question

I have the following table header:

<table id="time" class="new_table" border="0" cellpadding="2">
    <thead>
        <tr>
            <th scope="col" rowspan="2" class="sortHead">
                <a href="#" id="unitSort">Unit</a>
            </th>
            <th colspan="2" id="startDateHead" class="sortHead">
                <a href="#" id="startDateSort">Start</a>
            </th>
            <th colspan="2" id="endDateHead" class="sortHead">
                <a href="#" id="endDateSort">End</a>
            </th>
            <th rowspan="2" class="sortHead">
                <a href="#" id="distanceSort">Distance (miles)</a>
            </th>
            <th rowspan="2" class="sortHead">
                <a href="#" id="locationSort">Location</a>
            </th>
            <th rowspan="2" class="sortHead">
                <a href="#" id="driverName">Driver Name</a>
            </th>
        </tr>

I am dynamically adding and removing img tags to the a tag when a user clicks a button. How can I remove all img tags within the a tags of this table when they are there?

I have tried:

$('#time th a').each(function() { $(this).remove('img'); });

An example of the img element that is added to the a tag is as follows:

<a href="#" id="driverName">Driver Name<img id="test" src="test.png" width="10"></a>

Answer 1

How can I remove all img tags within the a tags of this table when they are there.

Simply

$('#time th a img').remove();

Demo

Answer 2

Your attempt works if you flip the syntax a bit. I can't explain why your version didn't work. The docs indicate that it should.

$('#time th a').each(function() {
    $(this).find('img').remove();
});

Demo

Answer 3

i modified your code little bit, i added .find("img") then use .remove()

 $('#time th').each(function () { $(this).find("img").remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <table id="time" class="new_table" border="0" cellpadding="2"> <thead> <tr> <th scope="col" rowspan="2" class="sortHead"> <a href="#" id="driverName">Driver Name<img id="test" src="arrow.png" width="10" /></a> </th> <th scope="col" rowspan="2" class="sortHead"> <a href="#" id="A1">Driver Mobile<img id="Img1" src="arrow.png" width="10"></a> </th> </tr> </thead> </table> 

Hope this will help you.