如何記錄帶有該標識的項目被刪除？

Question

我把它記錄爲'刪除'，我不知道如何使它具體到每個ID。 這是我的HTML：

<ul> 
    <li id="apple"> 
     <label><input type="radio" name="list" value="apple">Apple</label> 
     <button class='remove'>delete</button> 
    </li> 
    <li id="Orange"> 
     <label><input type="radio" name="list" value="orange">Orange</label> 
     <button class='remove'>delete</button> 
    </li> 
    <li id="pear"> 
     <label><input type="radio" name="list" value="pear">Pear</label> 
     <button class='remove'>delete</button> 
    </li> 
    <li id="banana"> 
     <label><input type="radio" name="list" value="banana">Banana</label> 
     <button class='remove'>delete</button> 
    </li> 
</ul> 

這是我的功能

$("ul").on("click", "button", function() { 
    alert('Are you sure you want to remove?'); 
    $(this).fadeOut(400, function(){ 
    $(this).parent().remove(); 
    console.log('removed'); 
    }); 
}); 

PS。我希望函數按以下順序執行; 1.用戶點擊「刪除」 2.確認他們肯定 3.淡出並刪除 4.一旦刪除，日誌與「身份證」的項目被刪除

Answer 1

剛剛獲得母公司的id在刪除它之前。

$("ul").on("click", "button", function() { 
    alert('Are you sure you want to remove?'); 
    $(this).fadeOut(400, function(){ 
     var itemID= $(this).parent().attr('id'); 
     $(this).parent().remove(); 
     console.log(itemID + " removed"); 
    }); 
}); 

Answer 2

你可以在刪除之前得到id。試試這個：

var id = $(this).parent().attr('id'); 
$(this).parent().remove(); 
console.log('removed ['+id+']'); 

作爲一個方面說明，alert不是一個確認對話框，只是一個信息彈出。你應該使用if(confirm('Are you sure you want to remove?'))。

Answer 3

第一步：確認用戶想要刪除它

var confirmed = confirm("Are you sure you want to delete this item?"); 
if(confirmed){ //..if true 
    //.. continue 
} 

第2步：淡出，記錄ID，並刪除

var item = $(this).closest('li'); //get the LI element 
var id = item.attr("id"); 
item.fadeOut("slow", function(){ 
    //when fade out finishes continue 
    item.remove(); //delete the element 
    console.log(item.attr('id')); 
}); 

整個代碼看起來是這樣的，例如

$('.remove').click(function(){ 

    var confirmed = confirm("Are you sure you want to delete this item?"); 
    if(confirmed){ 
     var item = $(this).closest('li'); 
     var id = item.attr('id'); 
     item.fadeOut("slow", function(){     
      item.remove(); 
      console.log("Removed item with ID: " + id); 
     }); 
    } 
});