Wie ajax angehängten Container mit Daten-ID entfernen

Question

Ich füge eine versteckte Felder mit Benutzerauswahl, damit ich sie später wieder einfügen kann. Auch ich füge ein normales div hinzu, um dem Benutzer ihre Auswahl zu zeigen.

Ich versuche, eine Löschfunktion zu erstellen, wobei die Schaltfläche die sichtbare Zeile sowie die ausgeblendete Zeile löscht.

Momentan kann ich die korrekte sichtbare Zeile löschen, aber das korrekte versteckte div wird nicht gelöscht.

Ich habe versucht, die data-id zu bekommen, aber es löscht immer das letzte in der Reihe, nicht das entsprechende.

Wie kann ich das korrekte div von #hiddenChildAgeRanges löschen, das dem in #visibleAgeRange entspricht?

//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

Wie Sie das versteckte Element schaffen die nanny_age_range_id Eigenschaft verwenden, das Attribut deleteAge Element auch die ID ist. Erstellen Sie den Selektor und führen Sie die Operation aus. Sie können Attribute Equals Selector [name=”value”] und remove() verwenden.

//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 
});