Jquery does not delete table rows

Question

Jquery does not delete table rows

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I have the form below which when I click on Add More Pet , it adds another panel

ButwhenIclickRemove,itremovesonlythebuttonsandthepanelscontinue.Lookatthecode:

<tableborder="0" style="width: 100%">
            <tr class='linhas'>
            <td>
                <div class="panel panel-primary">
                 <div class="panel-heading">
                   <i class="fa fa-paw fa-lg" aria-hidden="true"></i>  DADOS DO PET
                  </div>
                 <div class="panel-body">
                     <div class="table-responsive">
                         <div class="form-group">
                          <label>Espécie:</label>
                          <select name="Especie" class="form-control">
                            <option value="Canino">Canino</option>
                            <option value="Felino">Felino</option>
                          </select>
                        </div>
                        <div class="form-group">
                         <label>Nome do Pet:</label>
                         <input type="text" name="NomePet" class="form-control" required="required">
                        </div>
                        <div class="form-group">
                         <label>Aniversário do Pet:</label>
                         <input type="date" name="AniversarioPet" class="form-control" data-inputmask="'alias': '99/99/9999'" required="required">
                       </div>
                       <div class="form-group">
                        <label>Gênero:</label>
                         <div class="checkbox">
                           <label><input type="radio" name="SexoPet" value="Macho" checked> Macho</label>
                           <label><input type="radio" name="SexoPet" value="Fêmea"> Fêmea</label>
                         </div>
                      </div>
                      <div class="form-group">
                       <label>Idade:</label>
                       <select name="IdadePet" class="form-control">
                         <option value="Antes dos 11 meses">Antes dos 11 meses</option>
                         <option value="Entre 1 e 8 anos">Entre 1 e 8 anos</option>
                       </select>
                     </div>
                    </div>
                 </div>
             </div>
       </td>
     </tr>
    <tr>
      <td>
        <button type="button" class="adicionarCampo btn btn-primary" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Adicionar mais Pet</button>
        <button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button>
      </td>
  </tr>
</table>

JQUERY

<script type="text/javascript">
  $(function () {
    function removeCampo() {
    $(".removerCampo").unbind("click");
    $(".removerCampo").bind("click", function () {
       if($("tr.linhas").length > 1){
          $(this).parent().parent().remove();
       }
    });
  }

  $(".adicionarCampo").click(function () {
    novoCampo = $("tr.linhas:first").clone();
    novoCampo.find('input[type="text"]').val("");
    novoCampo.find('select').val("");
    novoCampo.insertAfter("tr.linhas:last");
    removeCampo();
  });
});
</script>

What I find strange, is when I put the line below inside a TD as another column where the panel is, it works:

<button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button>

How can I resolve this?

jquery

asked by anonymous 26.08.2017 / 15:03

2 answers

0

The formatting logic is not legal, use <table> for tabular data only, but if you still want to use <table> , leave the add and remove buttons outside the table.

Simple example using jQuery:

$(function(){ 
  var pets = $('.pets');
  var maximo_de_pets = 10;
  $('.add').click(function(){
    if (pets.find('tr').length < maximo_de_pets){
      var novo_pet = pets.find('tr').first().clone();
      novo_pet.find('input[type="text"]').val("");
      novo_pet.find('select').val("");
      pets.append(novo_pet);
    }
    else{
    	alert('maximo ' + maximo_de_pets + ' pets')
    }
  });
  $('.conteudo').on('click', '.remover', function(){
    if(pets.find('tr').length > 1){
      if ($(this).hasClass('ultimo')){
        pets.find('tr').last().remove();
      }
      else{
        $(this).closest('tr').remove();
      }
    }
    else{
      alert('minimo 1 pet');
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='conteudo'><tableclass="pets">
<tr><td>blabla <button class='remover'>remover</button></td></tr>
</table>
<div class="botoes">
  <button class="add">Adicionar</button>
  <button class="remover ultimo">Remover ultimo</button>
</div>
</div>

26.08.2017 / 16:00

MVC Doubt on Android PHP in production with composer

score 2 · Accepted Answer

You were using $(this).parent().parent().remove(); , ie from the bottom up the elements were: button > td > tr you were removing the tr that makes up the two buttons and not the tr that makes up the form fields.

The solution was: $("tr.linhas:last").remove(); the same way you used novoCampo.insertAfter("tr.linhas:last"); I used to remove the last element added.

OBS: I believe that what you are doing in the logic of removing PET, it hurts the concepts of UX, because let's say you have put 300 PETS, and you decide to remove the second from that list, you you have to remove 298 to get in the second. Try to add separate buttons. ;)

$("#remove").click(function() {
  if ($("tr.linhas").length > 1) {
    $("tr.linhas:last").remove();
  };
});


$(".adicionarCampo").click(function() {
  novoCampo = $("tr.linhas:first").clone();
  novoCampo.find('input[type="text"]').val("");
  novoCampo.find('select').val("");
  novoCampo.insertAfter("tr.linhas:last");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableborder="0" style="width: 100%">
  <tr class='linhas'>
    <td>
      <div class="panel panel-primary">
        <div class="panel-heading">
          <i class="fa fa-paw fa-lg" aria-hidden="true"></i> DADOS DO PET
        </div>
        <div class="panel-body">
          <div class="table-responsive">
            <div class="form-group">
              <label>Espécie:</label>
              <select name="Especie" class="form-control">
                            <option value="Canino">Canino</option>
                            <option value="Felino">Felino</option>
                          </select>
            </div>
            <div class="form-group">
              <label>Nome do Pet:</label>
              <input type="text" name="NomePet" class="form-control" required="required">
            </div>
            <div class="form-group">
              <label>Aniversário do Pet:</label>
              <input type="date" name="AniversarioPet" class="form-control" data-inputmask="'alias': '99/99/9999'" required="required">
            </div>
            <div class="form-group">
              <label>Gênero:</label>
              <div class="checkbox">
                <label><input type="radio" name="SexoPet" value="Macho" checked> Macho</label>
                <label><input type="radio" name="SexoPet" value="Fêmea"> Fêmea</label>
              </div>
            </div>
            <div class="form-group">
              <label>Idade:</label>
              <select name="IdadePet" class="form-control">
                         <option value="Antes dos 11 meses">Antes dos 11 meses</option>
                         <option value="Entre 1 e 8 anos">Entre 1 e 8 anos</option>
                       </select>
            </div>
          </div>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <button type="button" class="adicionarCampo btn btn-primary" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Adicionar mais Pet</button>
      <button type="button" id="remove" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button>
    </td>
  </tr>
</table>