CODEWITHSUNDEEP
jquery
Zendie
Zendie

Reputation: 1174

How to remove previous 3 elements in jquery

When the user clicks the delete button, I need to remove the label for Notes, text area of note and the checkbox near the text area and the delete button itself. I tried the following code but it only removes the checkbox before the delete button. Is there any easy way to do this?

$(".deleteSub").on("click", function() {
  $(this).prev('label').last().slideUp("slow", function() {
    $(this).prev('label').last().remove();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li class="ui-sortable-handle">test
    <div class="parentbox">
      <label for="sub-text" class="sub_textarea_label">Notes</label><br/>
      <textarea name="choice_notes" class="sub_textarea">note1</textarea>
      <label>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1"  checked>Required?
          </label>
      <button type="button" class="deleteSub">X</button>
      <br/>
      <label for="sub-text" class="sub_textarea_label">Notes</label><br/>
      <textarea name="choice_notes" class="sub_textarea">note2</textarea>
      <label>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1"  >Required?
          </label>
      <button type="button" class="deleteSub">X</button>

    </div>
  </li>
</ul>

Upvotes: 1

Views: 66

Answers (2)

4b0
4b0

Reputation: 22323

Use prevAll with :first like below.

$(".deleteSub").on("click", function() {

  $(this).prevAll('label:first').slideUp("slow", function() {
    $(this).prevAll('label:first').remove();
    $(this).prevAll('.sub_textarea:first').remove();
  });
  $(this).remove();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li class="ui-sortable-handle">test
    <div class="parentbox">
      <label for="sub-text" class="sub_textarea_label">Notes</label><br/>
      <textarea name="choice_notes" class="sub_textarea">note1</textarea>
      <label>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1"  checked>Required?
          </label>
      <button type="button" class="deleteSub">X</button>
      <br/>
      <label for="sub-text" class="sub_textarea_label">Notes</label><br/>
      <textarea name="choice_notes" class="sub_textarea">note2</textarea>
      <label>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1"  >Required?
          </label>
      <button type="button" class="deleteSub">X</button>

    </div>
  </li>
</ul>

Upvotes: 0

Eddie
Eddie

Reputation: 26844

One option is putting the set of elements on a div. On button click, remove the div container.

$(".deleteSub").on("click", function() {
  $(this).parent().slideUp("slow", function() {
    $(this).remove();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li class="ui-sortable-handle">test
    <div class="parentbox">
      <div>
        <!-- Add this div -->
        <label for="sub-text" class="sub_textarea_label">Notes</label><br/>
        <textarea name="choice_notes" class="sub_textarea">note1</textarea>
        <label>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1"  checked>Required?
          </label>
        <button type="button" class="deleteSub">X</button>
      </div>
      <br/>
      <div>
        <!-- Add this div -->
        <label for="sub-text" class="sub_textarea_label">Notes</label><br/>
        <textarea name="choice_notes" class="sub_textarea">note2</textarea>
        <label>
          <input type="checkbox" name="requiredNotes" class="requiredNotes" value="1"  >Required?
          </label>
        <button type="button" class="deleteSub">X</button>
      </div>
    </div>
  </li>
</ul>

Upvotes: 1

Related Questions