选择$（this）元素的父级的同级

Question

I need to update the id of all li that are siblings of the parent of the $(this) element by dynamically counting the present li that belong to the same "family" every time one is removed.

Note that there's more than one ul.customFieldUl on the page and more than one li.customFieldLi in each.

 $('.customFieldUl').on('click', '.remove-button', function() { var field = $(this).parents('li.customFieldLi'); if (field.length) { field.remove(); // PROBLEMATIC SELECTOR BELOW: $(this).parent().siblings().each(function(i) { var id = i + 1; $(this).prop('id', 'field_' + id); $(this).find('label#top_title').html('Custom Field #: <b>' + id + '</b> &raquo;'); }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="customFieldUl"> <li class="customFieldLi"> <label id="top_title">Additional Field</label> <div class="additionalFieldForm"></div> <div class="remove-button">Remove</div> </li> <li class="customFieldLi"> <label id="top_title">Additional Field</label> <div class="additionalFieldForm"></div> <div class="remove-button">Remove</div> </li> </ul> 

Answer 1

You need to target siblings() of LI before removing the LI element.

 $('.customFieldUl').on('click', '.remove-button', function() { var field = $(this).closest('li.customFieldLi'); //Take reference of siblings var siblings = field.siblings(); //Remove element field.remove(); // Now iterate and update properties. siblings.each(function(i) { var id = i + 1; $(this).prop('id', 'field_' + id); $(this).find('label#top_title').html('Custom Field #: <b>' + id + '</b> &raquo;'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="customFieldUl"> <li class="customFieldLi"> <label id="top_title">Additional Field</label> <div class="additionalFieldForm"></div> <div class="remove-button">Remove</div> </li> <li class="customFieldLi"> <label id="top_title">Additional Field</label> <div class="additionalFieldForm"></div> <div class="remove-button">Remove</div> </li> </ul> 

Identifiers in HTML must be unique , You are using id="top_title" multiple times which renders HTML invalid

Note: I totally agree with @Rory's comment, changing id attributes dynamically is not a good idea

Answer 2

The issue you have is that you're removing the element then trying to select elements based on it. This won't work as the element no longer exists. To fix this, get the related elements first, then perform the removal.

Note that you can simplify the code by using the index parameter provided by each() . Also, you've repeated the top_title id. You should make that a class. Try this:

 $('.customFieldUl').on('click', '.remove-button', function() { var $button = $(this); var $ul = $button.closest('.customFieldUl'); $button.closest('.customFieldLi').remove(); $ul.find('.customFieldLi').each(function(i) { $(this).prop('id', 'field_' + i); $(this).find('label.top_title').html('Custom Field #: <b>' + i + '</b> &raquo;'); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="customFieldUl"> <li class="customFieldLi"> <label class="top_title">Additional Field</label> <div class="additionalFieldForm"></div> <div class="remove-button">Remove</div> </li> <li class="customFieldLi"> <label class="top_title">Additional Field</label> <div class="additionalFieldForm"></div> <div class="remove-button">Remove</div> </li> <li class="customFieldLi"> <label class="top_title">Additional Field</label> <div class="additionalFieldForm"></div> <div class="remove-button">Remove</div> </li> <li class="customFieldLi"> <label class="top_title">Additional Field</label> <div class="additionalFieldForm"></div> <div class="remove-button">Remove</div> </li> <li class="customFieldLi"> <label class="top_title">Additional Field</label> <div class="additionalFieldForm"></div> <div class="remove-button">Remove</div> </li> </ul> 

It's also worth noting that changing id attributes dynamically is not a good idea. They are meant to be immutable.