Error removing div with Jquery

Question

Error removing div with Jquery

Navigation

#1 by (2 votes)

0

I need every time I click on the "add product" duplicate the new-product div. And when you click on 'remove product' you remove the created div. Until then it works, but when you try to add a product again after you have removed the error: undefinied.

$("#adc-produto-id").click(function() {
  linha = $(".novo-produto").html();
  $("#base").append("<br />" + linha + "<br />");
  $('#remover-produto').click(function() {
    $('.novo-produto').remove('.novo-produto');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><divclass="novo-produto">
    <h4>Qual a quantidade?</h4>
    <input type="number" name="quantidade" placeholder="Quantidade">
    <h4>Qual a superfície?</h4>
    <div class="custom-select">
      <select>
        <option value="">Superfície</option>
        <option value="alvenaria">Alvenaria</option>
        <option value="metal">Metal</option>
        <option value="madeira">Madeira</option>
      </select>
    </div>
    <h4>Qual a embalagem?</h4>
    <div class="custom-select">
      <select>
        <option value="">Embalagem</option>
        <option value="litro">800 ml</option>
        <option value="galao">3,2 Litros</option>
        <option value="balde">16 Litros</option>
      </select>
    </div>
  </div>
  <div id="base"></div>
  <div id="adc-produto-id" class="adc-produto">
    Adicionar produto
  </div>
  <div id="remover-produto"> remover produto</div>
  <input class="btn-enviar" type="submit" name="enviar" value="Enviar">
</form>

jquery

asked by anonymous 28.05.2018 / 20:47

1 answer

How to add a new style to an html element? Bootstrap v4.1 - Collapse does not work correctly

score 2 · Accepted Answer

Friend, you have two problems: the first is that the remove function was inside the add-in, and the second is that you were erasing the reference div (the one you keep inside the 'line' variable. In a very simple way, gave a corrected in this and put the function to delete the last product inserted. Another implementation can be done for each product to have a delete.

$("#adc-produto-id").click(function() {
  linha = $(".novo-produto").html();
  $("#base").append('<div class="novo-produto">' + linha + '</div>');
});

$('#remover-produto').click(function() {
  $('#base .novo-produto').last().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><divclass="novo-produto">
    <h4>Qual a quantidade?</h4>
    <input type="number" name="quantidade" placeholder="Quantidade">
    <h4>Qual a superfície?</h4>
    <div class="custom-select">
      <select>
        <option value="">Superfície</option>
        <option value="alvenaria">Alvenaria</option>
        <option value="metal">Metal</option>
        <option value="madeira">Madeira</option>
      </select>
    </div>
    <h4>Qual a embalagem?</h4>
    <div class="custom-select">
      <select>
        <option value="">Embalagem</option>
        <option value="litro">800 ml</option>
        <option value="galao">3,2 Litros</option>
        <option value="balde">16 Litros</option>
      </select>
    </div>
  </div>
  <div id="base"></div>
  <div id="adc-produto-id" class="adc-produto">
    Adicionar produto
  </div>
  <div id="remover-produto">remover <b>último</b> produto</div>
  <input class="btn-enviar" type="submit" name="enviar" value="Enviar">
</form>