Skip to main content
se añadieron 120 caracteres en el cuerpo
Origen Enlace
user137354
user137354

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 = "";
}

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

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

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 = "";
}
Origen Enlace
user137354
user137354

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

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