-1

Olá!
Alguém pode ajudar-me?
Estou iniciando no JavaScript e estou com dificuldade para remover um elemento do HTML com JavaScript.

Até consegui remover o nome do produto e preço, porém, quando é removido não consigo "add valor".

A ideia do exercício passado pelo meu professor é inserir nome e preço no input e fazer a soma e adicionar o botão remover.

Vou passar o código aqui até onde consegui chegar.

function produto() {
  var a = '';

  var $p = document.querySelector('emo');

  // cria um elemento em h4
  var a = document.createElement('p');

  var t = document.createTextNode(w2.value);

  a.appendChild(t);
  document.getElementById('emo').appendChild(a);
  w2.value = '';
}

function myFu() {
  var a = '';

  var $ul = document.querySelector('emo');

  //cria um elemento em h4
  var a = document.createElement('h4');

  var t = document.createTextNode(nr.value);

  a.appendChild(t);
  document.getElementById('emo').appendChild(a);
  nr.value = '';

  var a = document.createElement('hr');

  var t = document.createTextNode(nr.value);

  a.appendChild(t);
  document.getElementById('emo').appendChild(a);
  nr.value = '';

  var total = $('h4')
.get()
.reduce(function(tot, el) {
  var numero = el.innerHTML
    .split('.')
    .join('')
    .split(',')
    .join('.');
  return tot + Number(numero);
}, 0);
  $('#resultado').html(total.toLocaleString(undefined, { minimumFractionDigits: 2 }));
}
<style>
  h4 {
background: ;
margin: 0px;
  }

  p {
background: ;
margin: 0px;
  }

  #emo {
padding: 0px;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>
Insira um valor no Input e faça a soma deles. E crie uma função que remove o preço e nome do
produto
  </h1>

  <input class="form-control" type="text" id="w2" placeholder=" Nome do produto" />
  <input
class="form-control"
type="text"
id="nr"
placeholder=" Digite o Preço"
  />
  <button class="btn btn-default" type="submit" id="btn" onClick="produto(); myFu();">
add valor
  </button>
  <button class="btn btn-default" type="submit" id="btn" onClick="produtoRemov();">
Remover Produto e preço
  </button>
  <br />
  <span style="float:right">
Soma Total:
<div id="resultado"></div>
  </span>
  <br />
  <br />
  <ul>
<div id="emo"></div>
  </ul>
</div>

1

1 Resposta 1

0

Amigo você pode fazer da seguinte forma...

  • Guardar os inputs de descricao,valor em um array;
  • Renderizar a lista usando map
  • Total usando map e reduce

 let productList = [];
                function renderProducts() {
                    const html = productList
                    .map(function(product) {
                        return `
                            <h2> ${product.name}</h2>
                            <p> ${product.price}</p>
                            <hr>
                        `;
                    })
                    .join("");

                    const total = productList
                    .map(product => product.price)
                    .reduce((accumulator = 0, currentPrice) => accumulator + currentPrice);

                    document.getElementById("emo").innerHTML = html;
                    document.getElementById("resultado").innerHTML = total;
                }

                function addProduct() {
                    const selectorProductName = document.getElementById("product_name");
                    const selectorProductPrice = document.getElementById("product_price");
                    const name = selectorProductName.value;
                    const price = parseFloat(selectorProductPrice.value);
                    productList.push({ name, price });
                    selectorProductName.value = "";
                    selectorProductPrice.value = "";
                    renderProducts();
                }
                function removeProduct() {
                    const selectorProductName = document.getElementById("product_name");

                    const name = selectorProductName.value;
                    
                    productList = productList.filter(
                    product => product.name != name
                    );
                    renderProducts();
                }
            <div class="container">
            <h1>
                Insira um valor no Input e faça a soma deles. E crie uma função que remove o
                preço e nome do produto
            </h1>

            <input
                class="form-control"
                type="text"
                id="product_name"
                placeholder=" Nome do produto"
            />
            <input
                class="form-control"
                type="number"
                id="product_price"
                placeholder=" Digite o Preço"
            />
            <button class="btn btn-default" onClick="addProduct()">
                add valor
            </button>
            <button class="btn btn-default" type="submit" onClick="removeProduct()">
                Remover Produto e preço
            </button>
            <br />
            <span style="float:right">
                Soma Total:
                <div id="resultado"></div>
            </span>
            <br />
            <br />
            <ul>
                <div id="emo"></div>
            </ul>
            </div>

1
  • Davi obrigado. Pelo seu esforço para comigo, você tirou um pouco do seu tempo para mim ajudar. fico Feliz. O que faltou fazer foi a função de remover as entradas dos input é essa que mim enrolo. Quero inserir muitos produtos e quando precisar remover, quando clicar no botão remover remover um a um. 28/12/2019 às 14:42

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .