How to remove a single element having several with the same id

Navigation
1

I'm using a jQuery to flip an element and would like the feature to remove the cloned element.

When I try to remove the element, for some reason, it does not work because <button> is between <span class='input-group-btn'> . When I remove the tag <span> it works, however, I need this tag for the layout to be as the client desires.

Follow the HTML code: 

<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>

Follow 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();
}

Any suggestions?

    
asked by anonymous 08.05.2015 / 18:46

1 answer

4

Change the onClick of your remove button to onClick="delete_obj(this)" .

And the JavaScript for: 

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

or 

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

Example on jsFiddle .

Parents : jQuery does a search up from this and returns the first found element that matches the selector. Ex: 

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

In this case, when doing something like $(button).parents('#pai') the element returned will be <span id="pai">

Closest : jQuery will return the first element of the tree that encloses its element. Ex: 

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

In this case, when doing something like $(button).closest('#pai') the element returned will be <div id="pai">

Conclusion

Depending on the situation you should use one or the other to suit your need. This problem is indifferent, as there are no equal ids in the tree.

    
08.05.2015 / 18:56
PHP stripos in LUA Use SQL LIKE to find a number followed by space