cómo obtener la identificación del bucle en el botón

cómo obtener la identificación del bucle en el botón

mi navegador muestra un mensaje como este, porque estoy recortando el botón con la función onclick(). ¿hay alguna otra solución?

Error al manejar la respuesta: TypeError: self.processResponse no es una función en la extensión de cromo://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/notification.js:154:10

mi código html con algunos bucles de blade de laravel

<div class="table-responsive" id="gender">
    <table class="table" id="genders-table">
        <thead>
            <tr>
                <th>Jenis Kelamin</th>
                <th>Is Active</th>
                <th colspan="3">Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($genders as $gender)
            <tr>
                <td>{{ $gender->jenis_kelamin }}</td>
                <td>{{ $gender->is_active }}</td>
                <td width="120">
                    <div class='btn-group'>
                        <a href="{{ route('genders.show', [$gender->id]) }}" class='btn btn-default btn-xs'>
                            <i class="far fa-eye"></i>
                        </a>
                        <a href="{{ route('genders.edit', [$gender->id]) }}" class='btn btn-default btn-xs'>
                            <i class="far fa-edit"></i>
                        </a>

                        <button class='hapus btn btn-danger btn-xs' id='hapus' onclick="hapus(<?= $gender->id  ?>)"><i class='far fa-trash-alt'></i></button>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

mi código js. obtenga la identificación del corte y haga una llamada ajax

function hapus(genderId) {
        bootbox.confirm("Do you really want to delete record?", function(result) {
            if (result) {
                $.ajax({
                    url: '{{ url("api/genders/") }}' + '/' + genderId,
                    dataType: "JSON",
                    type: "DELETE",
                    data: genderId,
                    success: function(data, textStatus, xhr, response) {
                        // alert(true === 1);
                        if (data.success == true) {

                            $('#gender').load(" #genders-table", function() {
                                alert("data berhasil di hapus")
                            })

                        } else {
                            bootbox.alert('Record not deleted.');
                        }
                    }
                })
            }

        })
    }
Mostrar la mejor respuesta

Visite el centro de ayuda, haga un recorrido para ver qué y Cómo preguntar. Investigue un poco, busque temas relacionados con SO; si te quedas atascado, publica un ejemplo mínimo reproducible de tu intento, anotando la entrada y el resultado esperado, preferiblemente en un Stacksnippet: muestre HTML y no el código del servidor

Tu error no proviene de TU código sino de una extensión de Chrome llamada "WhatRuns"

También las identificaciones deben ser únicas, por lo que recomiendo delegar el clic del contenedor y usar el atributo de datos para la identificación

document.querySelector("#genders-table tbody").addEventListener("click", function(e) {
  const tgt = e.target.closest(".hapus");
  if (tgt) {
    const genderId = tgt.dataset.genderid;
    console.log(genderId)
    bootbox.confirm("Do you really want to delete record?", function(result) {
      if (result) {
        $.ajax({
          url: '{{ url("api/genders/") }}' + '/' + genderId,
          dataType: "JSON",
          type: "DELETE",
          data: genderId,
          success: function(data, textStatus, xhr, response) {
            // alert(true === 1);
            if (data.success == true) {
              $('#gender').load(" #genders-table", function() {
                alert("data berhasil di hapus")
              })
            } else {
              bootbox.alert('Record not deleted.');
            }
          }
        })
      }
    })
  }
})
<div class="table-responsive" id="gender">
  <table class="table" id="genders-table">
    <thead>
      <tr>
        <th>Jenis Kelamin</th>
        <th>Is Active</th>
        <th colspan="3">Action</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>Bla 1</td>
        <td>Bla 1.1</td>
        <td width="120">
          <div class='btn-group'>
            <a href="#" class='btn btn-default btn-xs'>
              <i class="far fa-eye"></i>
            </a>
            <a href="#" class='btn btn-default btn-xs'><i class="far fa-edit"></i></a>

            <button class='hapus btn btn-danger btn-xs'  data-genderid="<?= $gender->id  ?>"><i class='far fa-trash-alt'></i></button>
          </div>
        </td>
      </tr>

      <tr>
        <td>Bla 2</td>
        <td>Bla 2.1</td>
        <td width="120">
          <div class='btn-group'>
            <a href="#" class='btn btn-default btn-xs'>
              <i class="far fa-eye"></i>
            </a>
            <a href="#" class='btn btn-default btn-xs'>
              <i class="far fa-edit"></i>
            </a>

            <button class='hapus btn btn-danger btn-xs' data-genderid="<?= $gender->id  ?>"><i class='far fa-trash-alt'></i></button>
          </div>
        </td>
      </tr>

    </tbody>
  </table>
</div>

mejor hacer const tgt = e.target.closest(".hapus"); y solo if(tgt){... o tgt pueden apuntar a cualquier nodo dentro del botón y la condición fallará.

@Thomas Lo primero es una buena idea, el segundo comentario no es cierto, si hace clic en cualquier cosa, no tendrá la lista de clases correcta

@mplungjan, gracias señor... el código funciona y es mucho mejor... gracias

@Thomas, gracias por el consejo, aumenta mis conocimientos

Respuesta de manejo de errores: TypeError: self.processResponse no es una función, se trata de una extensión llamada "WhatRuns". ¡Muchas gracias por el consejo! Tuve el mismo error en Chrome y no pude resolverlo hasta encontrar tu respuesta.