2

Oi,

Eu estou gerando campos dinamicamente usando Jquery, e pra cada campo eu adiciono no fim do id um contador. Eu queria saber como eu poderia fazer para remover a div que engloba o botão e os campos.

isto é o meu form:

$contador = '';
foreach ($programas as $key => $formu){ $contador += 1;?>
<div id="campos_<?php echo $contador; ?>" name="campos[]" class="campos col-md-12" >
   <input id="tbprogramacao_tv_hora_inicio_<?php echo $contador; ?>" class="form-control hora" type="text" value="<?php echo $formu->getHoraInicio(); ?>" name="tbprogramacao_tv[hora_inicio][]" maxlength="8">
    <br><div class='btn btn-primary' style="border:solid 1px;" id="rmv" onclick="remover()"><span class="fa fa-minus"></span></div>
 </div>

esta é a função que eu estou criando para remover:

function remover()
{
    $('.campos').remove();
}

mas não funciona. Alguém que já passou por isso pode me ajudar?

1
  • Quando você usa o "." está se referindo a classe. Para id utilize "#", para tag (div, label, etc) use apenas o nome. Na documentação do jQuery tem uma lista com todos os selectors api.jquery.com/category/selectors 28/10/2015 às 19:34

3 Respostas 3

3

no onclick passe como parâmetro o id do campo:

onclick="remover('campos_<?php echo $contador; ?>')"

e na função remover use remove() no id do campo:

function remover(campo)
{
    $('#'+campo).remove();
}
2
  • bah, bem isso mesmo. Valeu Cara. 28/10/2015 às 19:29
  • bah o meu contador não está incrementando... D: 29/10/2015 às 17:01
0

Como todo campo está dentro de uma div, você pode passar o elemento botão (this) na função e remover a div que é o pai (parent).

function remover(elemento) {
  $(elemento).parent().remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div id="campos_1" name="campos[]" class="campos col-md-12">
  <input id="tbprogramacao_tv_hora_inicio_1" class="form-control hora" type="text" value="1" name="tbprogramacao_tv[hora_inicio][]" maxlength="8">

  <input type="button" onclick="remover(this);" class="btn btn-primary" value="Remover">
  </span>
</div>
</div>
<Br>
<div id="campos_1" name="campos[]" class="campos col-md-12">
  <input id="tbprogramacao_tv_hora_inicio_2" class="form-control hora" type="text" value="2" name="tbprogramacao_tv[hora_inicio][]" maxlength="8">
  <input type="button" onclick="remover(this);" class="btn btn-primary" value="Remover">
  </span>
</div>
</div>

0

Tente assim:

$("#rmv").click(function{
      $('.campos').remove();
});

Certifique-se que a div que você quer remover possui uma classe chamado campos.

Veja funcionando no: Jsfiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .