How to remove an HTML element with Javascript

Asked

Viewed 132 times

-1

Hello!
Can someone help me?
I’m starting Javascript and I’m having a hard time removing an HTML element with Javascript.

I even managed to remove the product name and price, however, when it is removed I can not "add value".

The idea of the exercise passed by my teacher is to insert name and price in the input and make the sum and add the remove button.

I’ll pass the code here as far as I can reach.

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 answer

0

Friend you can do as follows...

  • Store input from Description,value in an array;
  • Render the list using map
  • Total using map and 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>

  • Thank you David. For your effort with me, you took some of your time to help me. I’m happy. What was missing was the function of removing input inputs is the one that I roll. I want to insert many products and when need to remove, when click remove button one by one.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.