Remove field Hidden jQuery

Question

I have the following form:

<button type="button" id="remover<? echo $valor->int_cod; ?>" idProspect="<? echo $valor->int_cod; ?>" value="<? echo $valor->int_cod; ?>" class="btn btn-primary btn-xs pequeno remover"><? echo $valor->int_nome." - ".$valor->int_whatsapp; ?></button>

<input type="hidden" class="hide" idprospect="<? echo $valor->int_cod; ?>" value="<? echo $valor->int_cod; ?>" name="prospects[]">

I would like to click on it, be removed. I did it the secretive way:

$(".remover").click(function(){
    var idProspect = $(this).attr("idProspect");
    $("#remover"+idProspect).remove();
});

However, just removed the button, Hidden does not remove. How do I remove Hidden?

Answer 1

The example below deletes as you wish but would have to use "Class" to refer to more than one element:

<input type="text" class="remover" value="value1">
<input type="text" class="remover" value="value2">
<input type="hidden" class="remover" value="value3">
<a id="removerTodos" href="#">Remover</a>
<a id="contarInput" href="#">Contar input ativos</a>


$('#removerTodos').click(function(e){
   $('.remover').remove();
});

$('#contarInput').click(function(e){
   var qtd = $('input').size();
   alert(qtd);
});

Answer 2

Here’s a simpler way to do that. If you don’t want to, add the value $value->int_cod in the class and not in the element id, because by adding the value $value->int_cod in the element id, you will be creating two identical identifications.

<button class="remove">Botão</button>
<input type="hidden" class="remove"/>

$(document).ready(function() {
    $('.remove').on('click', function() {
        $('.remove').remove();
    });
});

Answer 3

Note that when you run $("#remover"+idProspect).remove();, remove() refers only to $("#remover"+idProspect), then in addition it would be necessary to do it also for adding input $("input[type=hidden]").remove(); , $(".remove").remove();, $(this).next().remove(); or in the manner most appropriate to their situation.

In the case $(".remove").remove(); removes all elements with the class remove, $("input[type=hidden]").remove(); removes all input type hidden, $(this).next().remove(); remove only the next element to the button clicked.