Mithilfe einer jQuery Methode ein Objekt-Property aus einem div auslesen - Anfänger

[MaxBegofProg]

Hallo zusammen,

vorab/nachträglich noch allein ein gesunden neues Jahr!
Und zwar versuche ich mithilfe eine jQuery-Methode die id-property aus meinem Kontakt auszulesen und in der variablen "removedPerson" zu speichern. Allerdings wird mir hier in der Konsole entweder nichts angezeigt oder "undefined". Kann es sein, dass ich hier die falschen Zugriffsargumente angegeben habe? - Ich habe schon einiges versucht aber leider mit keinem Ergebnis.

$(".flexBox").append('<div class="flexContact"><div class="flexElement" data-contactlist-id="id">' + Contact.id + '</div><div class="flexElement">' + Contact.firstName + '</div><div class="flexElement">' + Contact.lastName + '</div><div class="flexElement">' + Contact.birthDate + '</div><div class="flexElement">' + Contact.age + '</div><div class="flexElement">' + Contact.adress + '</div><div class="flexElement">' + Contact.zipCode + '</div><div class="flexElement">' + Contact.city + '</div ><div class="flexElement">' + Contact.phoneNumber + '</div > <button id="hide">X</button></div > ');
//Variablen der input Eingaben als neuen Kontakt im HTML-Dokument darstellen

Das ist mein Kontakt mit den jeweiligen Eigenschaften den ich in mein HTML einfüge, was auch alles soweit super funktioniert.

$(".flexContact #hide").click(function () {
// $(this).parents(".flexContact").hide("slow");

        var removedPerson = $($(this).parents(".flexContact")[0]).data("contactlist-id");

        console.log(removedPerson);
        //Zu löschende Person in der Kontaktliste

Mit dieser Methode versuche ich dann die id auszulesen, leider aber wie gesagt ohne Erfolg.
Vielleicht hat von euch jemand einen Tipp für mich mit welchen Argumenten das klappt.

Vielen Dank, schon mal! LG Max

Hallo zusammen,
vielen Dank für die Freischaltung meiner Frage! Ich habe die Lösung mittlerweile selbst herausgefunden und stelle diese hier mit rein falls jemand mal das selbe Problem hat.

$(".flexBox").append('<div class="flexContact"><div class="flexElement" id="id">' + Contact.id + '</div><div class="flexElement">' + Contact.firstName + '</div><div class="flexElement">' + Contact.lastName + '</div><div class="flexElement">' + Contact.birthDate + '</div><div class="flexElement">' + Contact.age + '</div><div class="flexElement">' + Contact.adress + '</div><div class="flexElement">' + Contact.zipCode + '</div><div class="flexElement">' + Contact.city + '</div ><div class="flexElement">' + Contact.phoneNumber + '</div > <button id="hide">X</button></div > ');
//Variablen der input Eingaben als neuen Kontakt im HTML-Dokument darstellen

$(".flexContact #hide").click(function () {
// $(this).parents(".flexContact").hide("slow");

        var removedPerson = $(this).siblings(".flexContact :eq(0)").text();

        console.log(removedPerson);
        //Zu löschende Person in der Kontaktliste

[mikdoe]

*freigeschaltet*

[Dormilich]

KISS:

var removedPerson = this.parentNode.firstElementChild.textContent

Funktioniert für jeden halbwegs modernen Browser.

[mikdoe]

Das ist aber bei einer Layout Änderung fehleranfällig. Ich hätte es auch eher an den Namen fest gemacht. Aber es ist mir auch nicht gelungen.