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

Question

I am using a jQuery to clone an element and would like to have the feature to remove the cloned element.

When I try to remove the element, for some reason, it doesn’t work according to <button> be among <span class='input-group-btn'>. How much I remove the tag <span> works, however, I need this tag for the layout to be as the client wishes.

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>

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

Any suggestions?

Answer 1

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

And Javascript for:

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

or

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

Example in jsFiddle.

Parents: jQuery does a search up from the 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, by doing something like $(button).parents('#pai') the returned element will be the <span id="pai">

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

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

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

Completion

Depending on the situation you should use one or the other to meet your need. In this problem is indifferent, because there are no equal ids in the tree.