Skip to main content
2 de 2
se añadieron 120 caracteres en el cuerpo
user avatar
user avatar

Hola en la parte de tu html del div cuadro2 quitale la clase row. para que quede asi

<div class="cuadro2"></div>

Y tu el js debe quedar asi.

function suma(){
  var especie;
  var cantidad;
  var precio;
  var total;
  especie = document.getElementById('especie').value;
  cantidad = document.getElementById('cant').value;
  precio = document.getElementById('compra').value;
  total = cantidad*precio;
  document.getElementById('subtotal').value = total;

  if(total > 0){
    $(".cuadro2").append(`<div class="row">
      <p class='col-3'>${especie}</p>
      <p class='col-2'>${cantidad}</p>
      <p class='col-2'>${precio}</p>
      <p class='col-3'>${total}</p>
      <p class="col-2"><input type='button' class='btn btn-danger' value='-' 
      onclick='borrar(event)' ></p></div>
    `)
  }
  
  // Muestro u oculto el encabezado de la tabla dependiende de si esta vacia o no
  if ($('.cuadro2').children().length) {
    $(".parrafo").removeClass("invisible");
    $(".parrafo").show();
    $(".cuadro").removeClass("invisible");
    $(".cuadro").show();
    reset();
  } else {
    $(".parrafo").hide();
    $(".cuadro").hide();
  }

};

function borrar(e){
  $(e.target).parent().parent().remove();
  if($('.cuadro2').find('.row').length===0){
    $('.parrafo').hide();
    $('.cuadro').hide();
  }
}

function reset(){
     document.getElementById('especie').value = "";
     document.getElementById('cant').value = "";
     document.getElementById('compra').value = "";
     document.getElementById('subtotal').value = "";
}
user137354