Remove previous parent element

Question

I need a help with jquery. I want when pushing on <img class='deletework"> remove tag <input type="text" hidden="true" value="1" required="true" name="countWorks"></input> from document. I try $('.deleteWork').click(function() { $(this).parent().parent().parent().parent().prev().remove(); }); but it is not work.

<td align="center">
<b></b>
<input type="text" hidden="true" value="0" required="true" name="countWorks"></input>
<input type="text" hidden="true" value="1" required="true" name="countWorks"></input>
<table class="raw_inside2" width="100%" border="0" style="margin:0.3em 0.1em;">
    <tbody>
        <tr>
            <th class="rowD" width="10%" title="Work types">
               Work types
            </th>
            <th class="rowD" width="10%" title="Power">
                Power
            </th>
        </tr>
        <tr class="rowW">
            <td>
                <input type="text" value="Frezing" required="true" name="ManMnf"></input>
            </td>
            <td>
                <input type="text" value="150" required="true" name="DSELbr"></input>
            </td>
            <td align="center">
                <img class="deleteWork" title="Delete work type" src="../imglib/icon/del.gif"></img>
            </td>
        </tr>

Answer 1

Try using .closest().parent().find("input[name=countWorks]").eq(1)

 $("img.deleteWork").click(function() { $(this).closest("table").parent().find("input[name=countWorks]").eq(1) .remove() }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tbody> <tr> <td align="center"> <b></b> <input type="text" hidden="true" value="0" required="true" name="countWorks" /> <input type="text" hidden="true" value="1" required="true" name="countWorks" /> <table class="raw_inside2" width="100%" border="0" style="margin:0.3em 0.1em;"> <tbody> <tr> <th class="rowD" width="10%" title="Work types"> Work types </th> <th class="rowD" width="10%" title="Power"> Power </th> </tr> <tr class="rowW"> <td> <input type="text" value="Frezing" required="true" name="ManMnf" /> </td> <td> <input type="text" value="150" required="true" name="DSELbr" /> </td> <td align="center"> <img class="deleteWork" title="Delete work type" src="../imglib/icon/del.gif" /> </td> </tr> </tbody> </table> </tr> </tbody> </table> 

Answer 2

Why don't you just give it an id, select it with jquery and remove it that way? Seems like you'd have to rewrite your current selector every time you amended the html in the area.

<input id="myCounter" type="text" hidden="true" value="1" required="true" name="countWorks"></input>

$('#myCounter').remove();