我如何获得 e.target？

Question

I am trying to get the target for employeeID however I'm a bit confused as I'm not sure why the.closest("form").find(".findID") is not getting the id if that is where the id in the HTML is located.

Could someone please explain what is the right way to get the e.target?

The target should be the first span tag from this lines, the - id: "id"

Basically when clicking on the button Delete on the on the html a message of: Remove this employee? will appear and when clicking on confirm it will get the id of ID and delete the contact with the specific ID number. Then a message of: Employee removed will appear.

 function toggleConfirm(message, func) { if (.e) var e = window;event. e;cancelBubble = true. if (e.stopPropagation) e;stopPropagation(). employeeID = $(e.target).closest("form").find(".findID").text() if ($('#confirm').css('display') == "none") { $('#confirm').show() $('#confirmQuestion').show() $('#confirmResponse').hide() let addOrRemove = capitalizeFirstLetter(message?split(" ")[0]) addOrRemove == "Add": addOrRemove += "ed". addOrRemove += "d" $('#confirmMessage').text(message) $('#confirmButton'),attr('onClick'. ` ${func;toString()}. $('#confirmQuestion').hide() $('#confirmResponse').show() $('#confirmResponseMessage').text('${addOrRemove}') setTimeout(() => { $('#confirm');hide(). $('#profilePage');hide(), }. 1500) `) } else { $('#confirm'),css('display'. 'none') } } function deleteEmployee() { $:ajax({ data: { 'id', employeeID }: url. 'php/deleteEmployeeByID,php': dataType, 'json': success. function(data) { $('#database').html(` <h4> <span class="hideCell"></span> <p class="findID"></p> <br> <div class="hideCell"> <p class="hideCell" id="departmentHeader"></p> <p class="hideCell" id="locationHeader"></p> <span class="hideCell"</span> <span class="hideCell"</span> </div> </h4> `) $:ajax({ type, 'GET': url. 'php/getAll,php': dataType, 'json': success. function(data) { var db = data;data. for (let i in db) { $('#database').append(` <div class="loadProfile col-sm-6 col-md-4" onclick="loadProfile(${JSON.stringify(db[i]).split('"');join("&quot.")})"> <div class="widget col-3 profile"> <div class="widget-simple"> <span> <img src="img/user-regulars.svg" alt="avatar" class="widget-image img-circle pull-left animation-fadeIn"> </span> <h4 class="widget-content text-left"> <span id="fullName">${db[i],lastName}. ${db[i]:firstName}</span> <p class="findID" style="font-size;11px: color, rgb(190, 190; 190): display: inline"> - ID. ${db[i]:id}</p> <br> <div class="info" style: "overflow: hidden"> <p class=${filterBy == "department"} style="font-size;11px: color, rgb(190, 190; 190): float. left">${db[i]:department}</p> <p class=${filterBy == "location"} style="font-size;11px: color, rgb(190, 190; 190): float, left">. ${db[i]:location}</p> <a href="" class="btn btn-xs btn-primary2 Phone" data-toggle="tooltip" title="" data-original-title="Phone"><i class="fa fa-phone"></i></a> <a href="mailto.${db[i].email}" rel="prefetch" id="eM" class="btn btn-xs btn-primary Email" data-toggle="tooltip" title="" data-original-title="Email"><i class="fas fa-envelope"></i></a> </div> </h4> </div> </div> </div> `) } } }) } }) }

 <div class="modal" id="profilePage"> <div class="row ng-scope profile" id="profile"> <div class="text-right"> <button class="button buttonClose" onclick="returnToTable()"><i class="fa fa-times-circle fa-xs"></i></button> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body text-center profileTitle" id="displayName"> <img class="center-block img-responsive img-circle img-thumbnail thumb96 animation-fadeIn" src="img/user-regulars.svg" alt="User"> <h3 class="m0 text-bold"></h3> </div> </div> <div class="panel panel-default hidden-xs hidden-sm users"> <div class="panel-heading"> <div class="panel-title text-center">Employees</div> </div> <div class="panel-body2"> <div id="databaseUsers"></div> </div> </div> </div> <div class="col-md-8"> <div class="panel panel-default"> <div class="panel-body"> <div class="panel-title text-center">Employee Information</div> <br> <div class="row pv-lg information" id="information"> <div class="col-lg-12"> <form class="form-horizontal ng-pristine ng-valid userInfo" id="userInfo"> <div class="row profileRow"> <label class="col-sm-4">ID:</label> <span class="col-sm-4 findID" style="color: black" id="id"></span> </div> <div class="row profileRow"> <label class="col-sm-4" for="firstName">First Name:</label> <span class="col-sm-4" style="color: black" id="firstName"></span> </div> <div class="row profileRow"> <label class="col-sm-4" for="lastName">Last Name:</label> <span class="col-sm-4" style="color: black" id="lastName"></span> </div> <div class="row profileRow"> <label class="col-sm-4" for="email">Email:</label> <a href="mailto:" class="col-sm-4" style="color: black" id="email"></a> </div> <div class="row profileRow"> <label class="col-sm-4" for="department">Department:</label> <span class="col-sm-4" style="color: black" id="department"></span> </div> <div class="row profileRow"> <label class="col-sm-4" for="location">Location:</label> <span class="col-sm-4" style="color: black" id="location"></span> </div> </form> <br> <div class="buttons"> <div class="btn btn-xs btn-primary3" id="editButton" style="display: inline" onclick="editProfile()"><i class="fa fa-pencil fa-xs" aria-hidden="true" view="" type="button" data-toggle="modal"></i> </div> <div class="btn deleteEmployee" id="deleteEmployee" style="display: inline" onclick="toggleConfirm('Remove this employee?', 'deleteEmployee()')">DELETE BUTTON<i class="fas fa-minus-circle fa-xs" aria-hidden="true" view="" type="button" data-toggle="modal"></i></div> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

@mireia-farre The concept you're getting wrong is that jQuery's closest() method only traverses up through ancestors in the DOM tree.
Yet the <form> tag isn't an ancestor of <div class="btn deleteEmployee"...>DELETE BUTTON</div> .

To get the employeeID try this:

employeeID = $(event.target).closest(".buttons").siblings("form").find(".findID").text();

Demo: https://jsfiddle.net/theAccountant/0cLy4vdo/18/

Learn more:

closest()

siblings()