使用jquery動態刪除項目

我想用jquery刪除動態創建的元素，到目前爲止我不成功，因爲每次我點擊2個或3個點擊後的x按鈕，它會刪除所有元素，而我想要只刪除元素被點擊使用jquery動態刪除項目

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_1" id="client_status_1"><input type="button" id="btRemove" rel="client_status_1" value="X" class="sectionBtn bt"></div> 

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_2" id="client_status_2"><input type="button" id="btRemove" rel="client_status_2" value="X" class="sectionBtn bt"></div> 

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_3" id="client_status_3"><input type="button" id="btRemove" rel="client_status_3" value="X" class="sectionBtn bt"></div> 

<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_4" id="client_status_4"><input type="button" id="btRemove" rel="client_status_4" value="X" class="sectionBtn bt"></div>

這裏是我的jQuery代碼：

$(document).on('click','#btRemove', function() { 
    var btnRemovalItem = $(this).attr('rel').split('_')[2]; 
    iCnt = btnRemovalItem; 
    if (iCnt != 0) { 
     $('#bt' + iCnt).remove(); 
     iCnt = iCnt - 1; 
    } 
    if (iCnt == 0) { 
     $(container).empty(); 
     $(container).remove(); 
     $('#btAdd').removeAttr('disabled'); 
     $('#btAdd').attr('class', 'bt') 
    } 
});

來源

2015-08-22 John

什麼是'container'？另外，'btnRemovalItem'是一個字符串，而不是一個整數。 – BenM

不能有多個具有相同ID的元素 – sap

首先，「id」字段在文檔中應該是唯一的，因此任何id都應該分配給不超過一個元素。其次，我建議使用$（「＃btRemove」）。parents（「。modal」）來查找該按鈕所在的'.modal'。請參閱文檔：https：//api.jquery.com/parents/。 – Imashcha

與您的標記的第一個主要問題是，你正在使用的多個元素使用相同的ID。 ID在文檔中必須是唯一的，並且不能重複使用，因此建議您使用btRemove作爲類。

如果你想刪除輸入，你可以簡單地不遍歷文檔樹，並使用.closest()刪除父母.model？

p/s：我無法理解您使用container變量的意圖，因爲它沒有在您的腳本中定義，所以您可能想更新您關於您正在嘗試做什麼的問題（1）容器的數量和（2）你想要刪除的東西是父元素，還是僅僅是前面的輸入元素。

$(document).on('click','.btRemove', function() { 
 
    $(this).closest('.modal').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_1" id="client_status_1"><input type="button" rel="client_status_1" value="X" class="btRemove sectionBtn bt"></div> 
 

 
<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_2" id="client_status_2"><input type="button" rel="client_status_2" value="X" class="btRemove sectionBtn bt"></div> 
 

 
<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_3" id="client_status_3"><input type="button" rel="client_status_3" value="X" class="btRemove sectionBtn bt"></div> 
 

 
<div class="modal"><label for=""></label><input data-placement="bottom" type="text" name="client_status_4" id="client_status_4"><input type="button" rel="client_status_4" value="X" class="btRemove sectionBtn bt"></div>

來源

2015-08-22 13:13:21 Terry

使用jquery動態刪除項目

回答

相關問題