Javascript ajax delete method not working

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

Can you give us some more information like a detail description of the problem you are experiencing? Do you get any errors in the browser console?

I noticed you are referencing a url with http. If the site you are making the call to is https that is going to cause trouble. You can call http from an http page, but not http from a page being served over https.

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.

@Yves0409 I can not test your code, because there is not an element with class=“deleteBtn” in the code you have posted. Maybe you could put all of your code on Codepen or on JSFiddle and provide a link. I assume the other code in get.js and/or submit.js creates this element. My first thought is that your element with class=“deleteBtn” does not have a value for “data-id” attribute.

If you add a console.log (see below), what does it show?

$("body").on("click", ".deleteBtn", function(e) {
  var id = $(e.target).attr("data-id");
  console.log('id = ' + id);
  deleteProp(id);
});
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"

That was my guess. You have a problem in the code which creates the button. The code you posted above seems like it is missing something. It would be easier for me (and others) if you put your code on Codepen, so we don’t have to recreate (and guess) what the code looks like.

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

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”).