$(document).ready( function () {

    $("button").click(function() {

      $.ajax({

        type: "POST",
        url: "[[~[[++page_ajax]]]]",
        data: "id="+$(this).attr("id")+"&ac=delMsg",
        success : OnSuccess

      });

      return false;

    });

  });

  function OnSuccess(result){

    $("output").html(result+'<br />'); // <- cette ligne fonctionne

    $("details").html(result); // <- cette ligne NE FONCTIONNE PAS comme elle devrait (tous les tags <detail> de ma page sont affectés et non seulement le parent du <button> qu'on a submit ) !
    
  }

<details id="details[[+mail.id]]"> // <- le contenu entier de cette balise <detail> (et uniquement celle-ci) devrait jarter
  
  <summary>[[+mail.date_sent]] - [[+mail.subject]]</summary>
 
  <p>[[+mail.message]]

      <form id="form[[+mail.id]]" action="#">
 
          <button type="submit" id="[[+mail.id]]">supprimer message</button> // <- l'utilisateur clique ici

      </form>

  </p>

</details>

<button type="submit" id="[[+mail.id]]">supprimer message</button>

$("button").click(function() {
  var button_clicked = $(this).attr('id');
});

$("button").click(function() {
       
       var button_clicked = $(this).attr('id');  // On récupère l'id du bouton cliqué
    
       $("button").each(function()  // On teste pour tous les boutons 
       {
           if ( $(this).attr('id') == button_clicked )  // Si leur id est celui du bouton cliqué
           {
                 $(this).parents('details').css('display', 'none') //Pour le masquer comme t'as demandé, après t'y fais ce que tu veux dessus
            }
         });

});

$(this).parents('details').removeClass('status4');