如何刪除帶數據ID的附加容器的ajax

Question

我正在添加一個帶有用戶選擇的隱藏字段，以便稍後重新插入它們。另外我添加了一個正常的div，向用戶顯示他們的選擇。

我想創建一個刪除函數，其中按鈕將刪除可見行以及隱藏的行。

現在我可以刪除正確的可見行，但它不會刪除正確的隱藏div。

我試圖獲得data-id，但它總是刪除行中的最後一個，而不是相應的一個。

如何從#hiddenChildAgeRanges中刪除與#visibleAgeRange中對應的正確div？

//nanny childcare ranges 
     $.each(data.nanny_age_range, function(index, data) { 

       var str = '<a href="#" id="' + data.nanny_age_range_id + '" aria-label="Close" class="deleteAge"><i class="fa fa-times" aria-hidden="true"></i></a>'; 

       var hiddenAgeTo = '<input id="userProfileAgeTo' + childAgeCount + '" value="'+data.age_maximum+'" name="userProfileAgeTo[]" style="visibility:hidden; position:absolute;" type="text" />'; 

       var hiddenAgeFrom = '<input id="userProfileAgeFrom' + childAgeCount + '" value="'+data.age_minimum+'" name="userProfileAgeFrom[]" style="visibility:hidden; position:absolute;" type="text" />'; 

       var childAgeAppend = 
        ' <div class="col-md-12" id="childAgeRange'+childAgeCount+'">'+ 
        '  <div class="col-md-3">'+ 
        '  <b>From'+data.age_minimum+' to '+data.age_maximum+'</b>'+ 
        '  </div>'+ 
        '  <div class="col-md-3">'+ 
        '  '+str+''+ 
        '  </div>'+ 
        '</div>'; 
       $("#hiddenChildAgeRanges").append('<div name="nanny_age_range_id[]" value="'+data.nanny_age_range_id+'" id="userAgeRangeSelection'+ childAgeCount+'" data-id="userAgeRangeSelection'+data.nanny_age_range_id+'">'+ hiddenAgeFrom + hiddenAgeTo+''); 
       $("#visibleAgeRange").append(childAgeAppend); 
       childAgeCount++; 

     }); 

//delete nanny age range 
$(document).on("click", ".deleteAge", function(e) { 
    e.preventDefault(); 
    var age_id = $(this).attr('id'); 

    $(this).closest('.col-md-12').fadeOut(300, function() { 
     $(this).remove(); 
    }); 
    $.ajax({ 
     type: "POST", 
     url: 'PHP/deleteData.php', 
     data: "age_id=" + age_id, 
     success: function(data) { 
      if (data.status == 'success') { 
       childAgeCount--; 
      } else if (data.status == 'error') { 
      } 
     }, 
     error: function(jqXHR, textStatus, errorThrown, data) { 
      console.log(jqXHR, textStatus, errorThrown, data); 
     } 
    }); 
}); 

Answer 1

作爲正在使用的屬性nanny_age_range_id這也是deleteAge元素的ID屬性創建隱藏的元素。創建選擇器並執行操作。可以使用Attribute Equals Selector [name=」value」]和remove()。

//delete nanny age range 
$(document).on("click", ".deleteAge", function(e) { 
    e.preventDefault(); 
    var age_id = $(this).attr('id'); 

    $('[data-id="userAgeRangeSelection' + age_id +'"]').remove(); 
    //Rest of the code 
});