Javascript ajax delete method not working

JavaScript
1

hello , i am relatively new at javascript and i am experiencing a problem with an Ajax ‘delete’ , can someone tell me what the problem could be? thanks!

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<!-- input form -->
        <form>
            Beds:<br>
            <input type="text" name="firstname" id="beds" value="">
            <br>
            Baths:<br>
            <input type="text" name="lastname" id="baths" value="">
            <br><br>
            <input type="submit" value="Submit" id="submit">
          </form> 


  <button id="refresh">refresh</button>
   
  <div class="row" id="propertyContainer">
<!-- content loads here -->
  </div>
   
 
 
<!-- javascript/jq -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/get.js"></script>
<script src="js/submit.js"></script>
<script src="js/delete.js"></script>


</body>
</html>

// this is the ajax delete method that is giving me issues

$('body').on('click','.deleteBtn', function(e){
    var id = $(e.target).attr('data-id');
    alert('gelukt')
    deleteProp(id);
   })   
    
    
   function deleteProp(id){
   $.ajax({method:'DELETE',url:"http://5ca1e35cc1b53400149acb87.mockapi.io/properties/"+id})
   .done(function(){
   //    getProperties();

   var elementToRemove = document.getElementById("prop" + id);
       elementToRemove.parentElement.removeChild(elementToRemove);
   })
}```
3

Thank you for the quick reply Randell , i get this error::
5ca1e35cc1b53400149acb87.mockapi.io/properties/undefined1
Failed to load resource: the server responded with a status of 404 (Not Found).

i use the same url for my GET and my POST and they work fine.

5 
function addToDom(){
$("#propertyContainer").empty();
for(var i=0;i<properties.length;i++){
var house=properties[i]
$('#propertyContainer').append(`  <div class="col-md-3 col-sm-6" id="prop${house.id}"><div class="property">
                  <figure class="deleteBtn" data-id="${house.id}" title="Apartment">
                          <i class="far fa-trash-alt"></i>
                  </figure>

yes the data-id is in the get.js.

i tried to do the console log and i get ''id=undefined"

7

okay thank you once again, i will try to do that tomorrow as it is very late here. much appreciated!

8

the problem seems to be solved, since the DOM had more then one button with the same data-id,
var id = $(e.target).attr(“data-id”) should have been var id = $(e.currentTarget).attr(“data-id”).