Error removing div with Jquery

Question

I need each time you click on "add product" to duplicate the div .new product. And when click 'remove product' remove the created div. Until then it works, but when you try to add a product again after having removed appears 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>
  <div class="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>

Answer 1

Friend, there are two problems: the first is that the remove function was inside the add and the second is that you were deleting the reference div (the one you keep inside the 'line' variable. In a very simple way, gave a corrected on this and put the function to erase the 'last' inserted product. Another implementation can be made 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>
  <div class="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>