change html da li

I have a ajax jquery that will get the click of a href with a figure inside.

I wanted to make a li background image ajax and not href was changed and at the end of the operation it returned to normal.

That is, href receives click . But a li with a image inside is not clicável usually

I'm doing this:

// JavaScript Document
$(document).ready(function(e) {

  $("a.excluiPlano").click(function() {

      if (confirm('Deseja Excluir este Plano?\nAtenção: Excluindo esse plano, todas as fotos serão excluidas!\nDeseja prosseguir?') ) {

        $.ajax({
            url: "../_requeridos/excluiPlano.php",
            type: 'POST',
            data: {'planoid': $(this).attr('planoid')},
            beforeSend: function() {               
              $("a.excluiPlano").html("<img src='../_img/_bannerImgs/spinner.gif' />")
              return false;
            },
            success: function (retorno) {

                if (retorno == 1) {

                    alert('Excluido com sucesso');
                    location.reload();

                } else {

                    alert("Erro na exclusão");

                }

            },
            cache: false,
            /* REMOVIDAS PARA QUE O AJAX ENVIE VARIÁVEIS FORA DO FORM/
            contentType: false,
            processData: false
            */
        });

        return false;

      }

  })


});

How to do this?

HTML + PHP

<?php 
      $planos = $planosDao->pesquisaPlanos();

      $planosConta = $planos == NULL ? 0 : count($planos);  
?>

<div class="lista">

 <h1 class="titulos">Listagem de Planos</h1>

 <?php 
   if ($planosConta==0) {

       echo $phpUtil->erro ("Sem retornos para esta pesquisa"); 

    } else { 

      $registros = 15; 
      $pagina = (isset($_GET['pagina']))? $_GET['pagina'] : 1; 
      $numPaginas = ceil($planosConta/$registros); 
      $inicio = ($registros * $pagina) - $registros; 

      $where = " LIMIT ".$inicio.",".$registros;
      $planos = $planosDao->pesquisaPlanos($where); 
?>

 <ul class="listaTopo">
     <li style="width:20%">NOME</li>
     <li style="width:55%">DESCRIÇÃO</li>
     <li style="width:10%">EDITAR</li>
     <li style="width:10%">EXCLUIR?</li>
 </ul>
 <?php 

   $contaLinhas = 0;
   $numreg = 25; // Quantos registros por página vai ser mostrado    
   $pagina = isset($_GET["pagina"]) ? $_GET["pagina"] : 1;
   $inicial = ($pagina * $numreg) - $numreg;   

   foreach ($planos as $plano) : 

     $corLinha = $contaLinhas % 2 == 0 ? "rgb(204,204,204)" : "rgb(255,255,255)";

     $linkEditar = "<a href='?editar&idPlano=".$plano->getIdPlano()."'><img src='_img/editar.png' /></a>";

    $linkExcluir = "<a class='excluiPlano' planoid=".$plano->getIdPlano()."><img src='_img/excluir.png' /></a>";

  ?>  
     <ul class="listaRegistros" style="background-color:<?php echo $corLinha; ?>">
         <li style="width:20%; text-align:left;"><?php echo $plano->getNome(); ?></li>
         <li style="width:55%; text-align:left;"><?php echo substr($plano->getDescricao(),0,30)." ..."; ?></li>
         <li style="width:10%; text-align:center;"><?php echo $linkEditar; ?></li>
         <li style="width:10%; text-align:center;" class="excluirRegistro"><?php echo $linkExcluir; ?></li>
     </ul>

 <?php 
   $contaLinhas++;
   endforeach;      

    //exibe a paginação 
    for($i = 1; $i < $numPaginas + 1; $i++) { 
        echo "<a class='contador' href='?listar&pagina=$i'>".$i."</a>"; 
    } 
  } 
?>
</div>
<br />

A simpler example of what I want would be the following:

$(document).ready(function(){
    $('a').click(function(){
        var i = $('a').index(this);
        alert(i);
    });
});

<script type="text/javascript"   src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ahref="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>

With this code I have returned only the element to which you clicked.

Now how do you get html() of it?