problems updating the DOM after http request, no framework

Hello,
I would like to let a button disappear after I have deleted the relevant data (in connection with that button) from the db. A small delete button within the bigger button should trigger its dissappearance.
The delete button dissapeares but not the parent button.
What could be the problem here? Thanks a lot!

The small button within the bigger butten is it’s 4th child! text, span, button, button

 $('button.cross').on('click',function(event) {

       event.stopPropagation();
       sectionID = ($(this).attr("data-sectionid"));

       if(confirm("Deleting a section will also delete all CPs of this section. Are you sure you want to proceed?")) {

        self = this;

       $.ajax({

        type:'POST',
        url:'./http.php?action=delSection',
        data: "sectionId=" + sectionID,

         success: function (result) {

              
              //THIS WORKS:
              $(self).css("display","none");

              //THIS DOES NOT WORK
              $(self).parent().css("display","none");

                  },
                   error: function(xhr,status,error) {

        var errorMessage = xhr.status + ': ' + xhr.statusText
         alert('Error - ' + errorMessage);
        },
     
          
       });

         }
      

   });      

Code (JavaScript):

SEMrush