How to remove an HTML element with Javascript

Question

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>

Answer 1

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>