如何遍历具有特定img alt属性的表行并删除JavaScript中的单元格

Question

Have an html table as follows (# of rows vary)..

 <table id="issuetable">
     <tbody>
       <tr id="issuerow13210" rel="13210" data-issuekey="Ticket-215" class="issuerow focused">
        <td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215" tabindex="-1" title="Ticket-215"></a>     <a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="IT Help" title="IT Help - For general IT problems and questions."></a></td>
        <td class="issuekey">
          <a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215">Ticket-215</a>
        </td>
        <a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"></a>
    <td class="issue_actions">    <div class="action-dropdown aui-dd-parent">
      <a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13210" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13210/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
       <span>
         <em>Actions</em>
       </span>
     </a>
   </div>
 </td>
    </tr>

    <tr id="issuerow13209" rel="13209" data-issuekey="Ticket-214" class="issuerow">
<td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214" tabindex="-1" title="Ticket-214"></a>     <a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="Task" title="Task"></a></td>
<td class="issuekey">
  <a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214">Ticket-214</a>
</td>
<td class="issue_actions">    <div class="action-dropdown aui-dd-parent">
  <a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13209" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13209/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
    <span>
      <em>Actions</em>
    </span>
  </a>
 </div>
 </td>
</tr>

</tbody>
     </table>

How can I use javascript once the page finishes loading to iterate through each row and delete the cell "issue_actions" only if the row contains an image with alt="IT Help"?

Answer 1

使用伪选择器:has ，然后找到要删除的元素：

 $('tr:has(img[alt="IT Help"]) .issue_actions').remove();

Answer 2

My own suggestion would be:

$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();

The use of .empty() removes the content of the <td> elements, but does not remove the <td> itself, which should prevent the table layout being distorted by rows with differing cell-counts.

 $('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty(); 

 img[alt="IT Help"] { box-shadow: 0 0 0 5px #f00; } td { border: 1px solid #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td> <img src="http://placekitten.com/150/150/" alt="IT Help" /> </td> <td class="issue_actions">This shouldn't be visible</td> </tr> <tr> <td> <img src="http://lorempixel.com/150/150/people" alt="Not IT Help" /> </td> <td class="issue_actions">This should be visible</td> </tr> <tr> <td> <img src="http://placekitten.com/150/150/" alt="IT Help" /> </td> <td class="issue_actions">This shouldn't be visible</td> </tr> </tbody> </table> 

The following uses remove() , which demonstrates the slight visual problem:

 $('img[alt="IT Help"]').closest('td').siblings('.issue_actions').remove(); 

 img[alt="IT Help"] { box-shadow: 0 0 0 5px #f00; } td { border: 1px solid #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td> <img src="http://placekitten.com/150/150/" alt="IT Help" /> </td> <td class="issue_actions">This shouldn't be visible</td> </tr> <tr> <td> <img src="http://lorempixel.com/150/150/people" alt="Not IT Help" /> </td> <td class="issue_actions">This should be visible</td> </tr> <tr> <td> <img src="http://placekitten.com/150/150/" alt="IT Help" /> </td> <td class="issue_actions">This shouldn't be visible</td> </tr> </tbody> </table> 

References:

• Attribute-equals ( [attribute="value"] ) selector .
• closest() .
• empty() .
• siblings() .