隱藏在另一列

Question

我需要與class="center outstanding"只有.small包含文本XYZ消除在TD表單按鈕基於字符串表列的按鈕。我使用下面的代碼，但它只會刪除第一個實例並停止。任何幫助是極大的讚賞！

if ($("div.subtle:contains('XYZ')").length) { 
 
    $('#pay').hide(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="accounts" class="billing"> 
 
    <tbody> 
 
    <tr title="Details"> 
 
     <td class="tblLeft"> 
 
     <div class="small">ABC Company</div> 
 
     </td> 
 
     <td class="center outstanding">$0.00</td> 
 
    </tr> 
 
    <tr title="Details"> 
 
     <td class="tblLeft"> 
 
     <div class="small">XYZ Company</div> 
 
     </td> 
 
     <td class="center outstanding">$161.47<br /> 
 
     <form autocomplete="off" method="post" action="/paythebill.asp" id="payaccountform"><input class="button completeworkflow" type="submit" name="pay" id="pay" value="Pay" title="" /></form> 
 
     </td> 
 
    </tr> 
 
    <tr title="Details"> 
 
     <td class="tblLeft"> 
 
     <div class="small">XYZ Company</div><br /></td> 
 
     <td class="center outstanding">$0.00<br /></td> 
 
    </tr> 
 
    <tr title="Details"> 
 
     <td class="tblLeft"> 
 
     <div class="small">ABC Company</div> 
 
     </td> 
 
     <td class="center outstanding">$122.88<br /> 
 
     <form autocomplete="off" method="post" action="/paythebill.asp" id="payaccountform"><input class="button completeworkflow" type="submit" name="pay" id="pay" value="Pay" title="" /></form> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

要做到這一點，您可以使用:contains找到相關.small元素，然後遍歷DOM找到相同tr和hide()它內部的相關form元素。試試這個：

$('.small:contains("XYZ")').closest('tr').find('form, br').hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="accounts" class="billing"> 
 
    <tbody> 
 
    <tr title="Details"> 
 
     <td class="tblLeft"> 
 
     <div class="small">ABC Company</div> 
 
     </td> 
 
     <td class="center outstanding">$0.00</td> 
 
    </tr> 
 
    <tr title="Details"> 
 
     <td class="tblLeft"> 
 
     <div class="small">XYZ Company</div> 
 
     </td> 
 
     <td class="center outstanding">$161.47<br /> 
 
     <form autocomplete="off" method="post" action="/paythebill.asp" id="payaccountform"><input class="button completeworkflow" type="submit" name="pay" id="pay" value="Pay" title="" /></form> 
 
     </td> 
 
    </tr> 
 
    <tr title="Details"> 
 
     <td class="tblLeft"> 
 
     <div class="small">XYZ Company</div><br /></td> 
 
     <td class="center outstanding">$0.00<br /></td> 
 
    </tr> 
 
    <tr title="Details"> 
 
     <td class="tblLeft"> 
 
     <div class="small">ABC Company</div> 
 
     </td> 
 
     <td class="center outstanding">$122.88<br /> 
 
     <form autocomplete="off" method="post" action="/paythebill.asp" id="payaccountform"><input class="button completeworkflow" type="submit" name="pay" id="pay" value="Pay" title="" /></form> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

另外請注意，你已經複製在你的HTML的pay和payaccountformid屬性。 id必須是唯一的。我建議改變他們到課堂或刪除他們，如果不需要的話。