How to add a button to remove user - html

Question

I currently have this code that displays users on a team and when you click on the name of a user that is on the list it passes the name that you click to a function which removes them from the team. Instead I would like a button to be next to the name and when you click the button it removes the person that the button is next to. How would I go about doing this
$(document).ready(function() {
$("#your_teams234").change(function() {
var team = $("#your_teams234").val();
$.ajax({
url: 'functions.php',
method: 'post',
data: 'members=' + team
}).done(function(requests) {
console.log(requests);
requests = JSON.parse(requests);
$('#teammates').empty();
if (requests.length != 0) {
$("#teamContainer").css("display", "block");
requests.forEach(function(request) {
$('#teammates').append('<p class="myDivs">' + request.email + '</p>')
})
}
if (requests.length == 0) {
$('#teammates').append(`<p> No teammates </p>`)
}
$('.myDivs').click(function() {
$var1 = $(this).text();
$.ajax({
url: 'functions.php',
type: 'post',
data: {
"callFunc1": $var1,
"teamName": team
},
success: function(response) {
console.log(response);
}
});
});
})
})
})
Here is the html code for my team container
<div id="teamContainer" style="display: none;">
<p style="font-weight: bold; font-size:18px left">Current Team Members (click name to remove)</p>
<div id='teammates'>
</div>
<hr style="margin-left: 350px; margin-right: 350px">
</div>
</div>

Answer 1

First off, you really should be passing ID's rather than names in order to access a user. What if you have 2 users with the same name, or apostrophes/odd characters - or even the lack of a name? At any rate, you didn't show your HTML but here's how it could work.
$('.remover').click(function() {
let $user = $(this).closest('.user-container').find('.myDivs');
let $userid = $user.data('id');
let $username = $user.text();
console.log(`remove user ${$username}, id ${$userid}`);
$(this).closest('.user-container').remove()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='user-container'>
<span class='myDivs' data-id='1'>John Smith</span>
<button class='remover'>Remove user</button>
</div>
<div class='user-container'>
<span class='myDivs' data-id='2'>Susan Sarandon</span>
<button class='remover'>Remove user</button>
</div>
<div class='user-container'>
<span class='myDivs' data-id='3'>Bill Nye</span>
<button class='remover'>Remove user</button>
</div>