JQuery Remove Parent Elements

问题:

I have some third party HTML that looks like this:

    <tr>
        <td>
            <asp:Label ID="lblURL" AssociatedControlID="txtURL" 
                  runat="server" EnableViewState="false" CssClass="FieldLabel" />
        </td>
        <td>
            <cms:CMSTextBox ID="txtURL" runat="server" 
                  CssClass="TextBoxField" EnableViewState="false"
                  MaxLength="450" ProcessMacroSecurity="false" />
        </td>
    </tr>

I am not allowed to change this HTML. I want to hide this label and input tag and have figured out how to do that in JQuery with this code:

$('label[id$="lblURL"]').hide();
$('input[id$="txtURL"]').hide();

This effectively hides the elements from the page. Problem is that the parent and elements still remain. How can remove the tr and td elements?

回答1:

It looks like your label and input box are always in an enclosing table row, so you can hide the whole table row:

$('label[id$="lblURL"]').closest('tr').hide();

回答2:

To remove the TR completely

$('tr [id$="lblURL"]').closest('tr').remove();

回答3:

You can try using .remove instead of hide, $('#element').parent.remove();