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>