1

Estou usando um jQuery para clocar um elemento e gostaria de ter o recurso de remover o elemento clonado.

Quando tento remover o elemento, por alguma razão, não funciona em função do <button> estar entre <span class='input-group-btn'>. Quanto retiro a tag <span> funciona, contudo, preciso dessa tag para o layout ficar conforme o cliente deseja.

Segue o código HTML:

<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
    <h3 class="panel-title">Teste de Adicionar e Remover elementos</h3>
</div>    
<div class="panel-body">
    <form id="inserir_pessoas" method="POST" action="<?=base_url('cadastro/pessoa_fisica/salvar'); ?>">
        <div class="form-group">
            <div class="row">
                <div class="col-sm-4">
                    <label for="telefone">Telefone(s)</label>
                    <div id="telefone" class="input-group">
                        <span class="input-group-btn">
                            <select id="sel_tipo_telefone" class="btn btn-default" name="tipo_telefone[]">
                                        <option value="1">Celular</option>
                                        <option value="1">Residencial</option>
                                        <option value="1">Trabalho</option>
                                        <option value="1">Outro</option>
                            </select>
                        </span>
                        <input type="text" class="form-control" placeholder="(11) 5555-5555" name="telefone[]">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" onClick="delete_obj(this)">X</button>
                        </span>                            
                    </div>
                    <span id="novo_telefone"></span>
                    <p>
                    <button type="button" onClick="clone_obj('telefone', 'novo_telefone')">Novo Telefone</button>                        
                </div>
            </div>
        </div>
    </form>
</div>    
</div>
</div>

Segue JavaScript:

    function clone_obj(obj_name, obj_destination) {
$(function(e) {
    $('#' + obj_name).clone().appendTo('#' + obj_destination);
});
}

function delete_obj(obj_name) {    
    $(obj_name).parent('#telefone').remove();
}

Alguma sugestão?

2
  • 2
    Na sua função de clonar, tente alterar o id: $('#' + obj_name).clone().attr('id', 'outro_id').appendTo('#' + obj_destination);. Ids são e devem permanecer únicos.
    – Oeslei
    8/05/2015 às 16:51
  • Olá Oeslei, obrigado pela pronta resposta. Como estou clonando, teria de colocar o novo 'id' no botão de deletar tb...
    – Evert
    8/05/2015 às 16:53

1 Resposta 1

4

Altere o onClick do seu botão remover para onClick="delete_obj(this)".

E o JavaScript para:

function delete_obj(obj) {
    $(obj).parents('#telefone').remove();
}

ou

function delete_obj(obj) {
    $(obj).closest('#telefone').remove();
}

Exemplo no jsFiddle.

Parents: o jQuery faz um search up a partir do this e retorna o primeiro elemento encontrado que corresponda ao seletor. Ex:

<div id="pai>
  <div id="filho">
    <span id="pai">
      <button>parents</button>
    </span>
  </div>
</div>

Neste caso, ao fazer algo como $(button).parents('#pai') o elemento retornado será o <span id="pai">

Closest: o jQuery irá retornar o primeiro elemento do árvore que engloba seu elemento. Ex:

<div id="pai>
  <div id="filho">
    <span id="pai">
      <button>parents</button>
    </span>
  </div>
</div>

Neste caso, ao fazer algo como $(button).closest('#pai') o elemento retornado será o <div id="pai">

Conclusão

Dependendo da situação você deve utilizar um ou outro para atender a sua necessidade. Neste problema é indiferente, pois não existem ids iguais na árvore.

4
  • Luis Henrique, consegui fazer funcionar,contudo, quando integro ao bootstrap meu 'button' fica entre tags de 'span' o que, por alguma razão, está impedindo o código de funcionar... pode me ajudar?
    – Evert
    8/05/2015 às 18:48
  • @Evert editei a resposta para atender a sua necessidade. Se resolveu o problema marque a resposta como aceita. 8/05/2015 às 19:33
  • Luis Henrique, vc é o cara! valeu brother! Ficou show!! =)
    – Evert
    8/05/2015 às 19:42
  • Não consegui votar.... =(
    – Evert
    8/05/2015 às 19:42

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 .