-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>
That question helps you? Remove page element with javascript
– DaviAragao