1

Hola estoy haciendo una aplicación de productos como ejercicio con Bootstrap y Jquery , ya tengo bastante avanzada la aplicación, pero estoy teniendo un problema para cargar los productos, cuando cargo un producto este genera un cuadro con los datos ingresados y un botón para poder eliminarlo,el problema es que cuando borro uno de los productos con el botón se borra todo el cuadro y no me deja seguir cargando productos. Saludos.

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(`
      
      <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()' ></p>
      
    `)

  }
  
  // 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(){
  $("p").remove("");
  $(".cuadro2").remove("")
};

function reset(){
     document.getElementById('especie').value = "";
     document.getElementById('cant').value = "";
     document.getElementById('compra').value = "";
     document.getElementById('subtotal').value = "";
}
*{
  margin: 0px;
  padding: 0px;
}


.container{
  height: 600px;
  width: auto;

}

.ct1{
  padding: 0 20px;
  text-transform: uppercase;
  font-weight: bold;

}

.invisible{
	display: none;
}

.cuadro{
  margin-top: 50px;
  background-color: blue;
  color: white;
}

.cuadro2{
  background-color: white;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Movizen Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="estilos.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script type="text/javascript" src="main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>

    <div class="container bg-primary">

      <div class="row text-white ct1">
        <div class="col">Especie</div>
        <div class="col">Cantidad</div>
        <div class="col">Precio($)</div>
        <div class="col">Total($)</div>
      </div>

      <div class="row ct2">
        <input class="col" type="text" id="especie" placeholder="Especie">
        <input class="col"type="text" id="cant" placeholder="Cantidad">
        <input class="col" type="text" id="compra" placeholder="Precio compra">
        <input class="col" type="text" id="subtotal" placeholder="Total" disabled>
        <input type="button" class="btn btn-success" placeholder="Total" onclick="suma()" id="sum" value="+" />
      </div>

      <p class="parrafo invisible">Su cartera contiene los siguientes elementos:</p>

      <div class="row cuadro invisible">
        <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'>Acción</p>
      </div>

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

    </div>

  </body>
</html>

2 respuestas 2

1

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

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='col-12 boxRowElements'>
        <div class='row'>
        <div class='col-3'> <p>${especie}</p></div>
        <div class='col-2'><p>${cantidad}</p></div>
        <div class='col-2'><p>${precio}</p></div>
        <div class='col-3'><p>${total}</p></div>
        <div class='col-2'><p><input type='button' class='btn btn-danger' value='-' onclick='borrar(event)' ></p></div>
        </div>
        </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(event) {
  debugger;
  $(event.target)
    .closest(".boxRowElements")
    .remove();
}

function reset() {
  document.getElementById("especie").value = "";
  document.getElementById("cant").value = "";
  document.getElementById("compra").value = "";
  document.getElementById("subtotal").value = "";
}
* {
  margin: 0px;
  padding: 0px;
}

.container {
  height: 600px;
  width: auto;
}

.ct1 {
  padding: 0 20px;
  text-transform: uppercase;
  font-weight: bold;
}

.invisible {
  display: none;
}

.cuadro {
  margin-top: 50px;
  background-color: blue;
  color: white;
}

.cuadro2 {
  background-color: white;
  color: black;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Movizen Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="estilos.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script type="text/javascript" src="main.js"></script>
</head>

<body>

  <div class="container bg-primary">

    <div class="row text-white ct1">
      <div class="col">Especie</div>
      <div class="col">Cantidad</div>
      <div class="col">Precio($)</div>
      <div class="col">Total($)</div>
    </div>

    <div class="row ct2">
      <input class="col" type="text" id="especie" placeholder="Especie">
      <input class="col" type="text" id="cant" placeholder="Cantidad">
      <input class="col" type="text" id="compra" placeholder="Precio compra">
      <input class="col" type="text" id="subtotal" placeholder="Total" disabled>
      <input type="button" class="btn btn-success" placeholder="Total" onclick="suma()" id="sum" value="+" />
    </div>

    <p class="parrafo invisible">Su cartera contiene los siguientes elementos:</p>

    <div class="row cuadro invisible">
      <div class='col-3'>Especie</div>
      <div class='col-2'>Cantidad</div>
      <div class='col-2'>Precio($)</div>
      <div class='col-3'>Total($)</div>
      <div class='col-2'>Acción</div>
    </div>

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

  </div>

</body>

</html>

Estabas insertando los elementos de un solo montón. Tenias que tener un identificador por "fila" y después eliminar dicho elemento.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.