How to delete an element specific to <select>? (Javascript, Jquery)

Question

I would like to delete by ip each of the specific objects that owns it.

 `<tr class="trAdminEdit"><td><div class="input-field col s12">
            <select id="select` + index + `" class="localAdminSelection adminEdit">
            @foreach ($users as $user)
              <option value="{{$user->id}}">{{$user->name}}</option>
            @endforeach
            <i id="apagarAdmin" onClick = 'removeAdmin()'>blocked</i>
            </select>
            </div></td></tr>`

and my job is like this

function removeAdmin(event, id){
        if($('.adminEdit').length > 2){
        $('.trAdminEdit').parent().parent().remove();
        console.log('foi')
        if ($('.adminEdit').length == 2)
        $('#apagarAdmin').css('display','none');
        if ($('.adminEdit').length < {{count($users)}} && $('#apagarAdmin').css('display') == 'none')
        $('#apagarAdmin').css('display','inline-block');

      }
    }

but the function at the moment erases all administrators and not the corresponding from which I press the button.

Answer 1

Experiment with the function like this:

function removeAdmin(){
    let opcaoSelecionada = $('.adminEdit').find(":selected"); // aqui vai buscar o elemento
    if(opcaoSelecionada && opcaoSelecionada.length > 0){ //verifica que o elemento existe e que tem opção selecionada
        opcaoSelecionada.remove(); // aqui remove o elemento
    }
}

And HTML should look like this:

`<tr class="trAdminEdit"><td><div class="input-field col s12">
    <td>
        <select id="select` + index + `" class="localAdminSelection adminEdit">
            @foreach ($users as $user)
              <option value="{{$user->id}}">{{$user->name}}</option>
            @endforeach
        </select>
        <i id="apagarAdmin" onClick = 'removeAdmin()'>blocked</i>
    </td>
</tr>`