CODEWITHSUNDEEP
javascriptjqueryhtml
Serg Bash
Serg Bash

Reputation: 91

Remove previous parent element

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>

Upvotes: 0

Views: 37

Answers (2)

guest271314
guest271314

Reputation: 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>

Upvotes: 1

JMJ
JMJ

Reputation: 99

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();

Upvotes: 0

Related Questions