選擇的$（本）元素

Question

父母的兄弟姐妹，我需要通過動態計數屬於同一「家庭」本li更新所有li屬於$(this)元素的父的兄弟姐妹的id每次一個是除去。

請注意，頁面上有多個ul.customFieldUl，每個頁面上有多個li.customFieldLi。

$('.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

您需要拆卸LI元素之前對目標的LIsiblings()。

$('.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>

標識符在HTML必須是唯一的，您正在使用id="top_title"多次這使得HTML無效

注：我完全@同意Rory的評論，改變id屬性動態不是一個好主意

Answer 2

您遇到的問題是您要刪除元素，然後嘗試根據它選擇元素。由於元素不再存在，這將不起作用。要解決此問題，請先獲取相關元素，然後執行刪除操作。

請注意，您可以使用由each()提供的索引參數來簡化代碼。此外，您重複了top_title ID。你應該成爲一堂課。試試這個：

$('.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>

這也是值得注意的是，改變id動態屬性是不是一個好主意。它們意味着不可變。