Usuwanie elementów ze strony

Question

Witam mam prośbę. Mógłby mi ktoś pomóc aby po wypisaniu średniej można było usunąć którąś z wpisanych ocen. Pozdrawiam serdecznie

<h1>Twoje wagi</h1>
<b>Waga 1</b><input type="number" id="1" placeholder="Wpisz tu pojedyńczą ocenę">
<input type="button" value="dodaj"  onClick="dodaj1()"><br>
<p id="wynik1"></p>

<b>Waga 2</b><input type="number" id="2">
<input type="button" value="dodaj" onClick="dodaj2()"><br>
<p id="wynik2"></p>

<b>Waga 3</b><input type="number" id="3" placeholder="Wpisz tu pojedyńczą ocenę">
<input type="button" value="dodaj" onClick="dodaj3()"><br>
<p id="wynik3"></p>

<b>Waga 4</b><input type="number" id="4">
<input type="button" value="dodaj" onClick="dodaj4()"><br>
<p id="wynik4"></p>

<b>Waga 5</b><input type="number" id="5" placeholder="Wpisz tu pojedyńczą ocenę">
<input type="button" value="dodaj" onClick="dodaj5()"><br>
<p id="wynik5"></p>

<b>Waga 6</b><input type="number" id="6">
<input type="button" value="dodaj" onClick="dodaj6()"><br>
<p id="wynik6"></p>
<p id="wynikost"></p>


<script>
var zlicz=0;
var wyn=0;
function dodaj1(){
	var ocena=document.getElementById("1").value;
	zlicz++;
	document.getElementById("wynik1").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*1;
	var git=(wyn/zlicz);
	funkcja(git);
}

function dodaj2(){
	var ocena=document.getElementById("2").value;
	zlicz=zlicz+2;
	document.getElementById("wynik2").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*2;
	var git=(wyn/zlicz);
	funkcja(git);
}

function dodaj3(){
	var ocena=document.getElementById("3").value;
	zlicz=zlicz+3;
	document.getElementById("wynik3").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*3;
	var git=(wyn/zlicz);
	funkcja(git);
}

function dodaj4(){
	var ocena=document.getElementById("4").value;
	zlicz=zlicz+4;
	document.getElementById("wynik4").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*4;
	var git=(wyn/zlicz);
	funkcja(git);
}

function dodaj5(){
	var ocena=document.getElementById("5").value;
	zlicz=zlicz+5;
	document.getElementById("wynik5").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*5;
	var git=(wyn/zlicz);
	funkcja(git);
}


function dodaj6(){
	var ocena=document.getElementById("6").value;
	zlicz=zlicz+6;
	document.getElementById("wynik6").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*6;
	var git=(wyn/zlicz);
	funkcja(git);
}


function funkcja(git)
{
	document.getElementById("wynikost").innerHTML="WYNIK OCEN: "+wyn+"<br>";
	document.getElementById("wynikost").innerHTML+="WYNIKOL: "+git;
	
}
</script>

 

Comments

do usuwania elementów ze struktury DOM służy metoda "element.remove()"

---

funkcja dodaj robi kazda to samo wiec zrob tylko jedna funkcje zamiast powtarzac je

---

@Author[], ale w jaki sposób mogę to zrobić, żeby usuwała się ona po kliknięciu bo przecież musi to mieć jakieś zdarzenie, a ta ocena nie może być buttonem. Przepraszam, że po tak długim czasie odpisuje

 

---

Zdarzenie onclick może być emitowane dla wielu elementów nie tylko buttonów

Kod js:

 

let elements=document.getElementsByClassName("input") //najlepiej nadać elementowi klasę żeby nie dodawać eventListenera do każdego elementu oddzialnie*/

elements.forEach((e)=>{ //pętlę forEach można zastąpić zwyczajną pętlą for
e.addEventListener('click', (event)=>{ //strzałkowa funkcja anonimowa
let target = event.target; //pobieranie klikniętego elementu
/*jeżeli kliknięty element ma elementy potomne to użyć event.currentTarget zamiast event.target*/
target.remove(); //usuwam element
},false); //dodałem false w celu wsparcia starszych przeglądarek
})

Oczywiście po tej operacji powinieneś zaktualizować wynik

Wytłumaczenie:

• dałem addEventListener żeby nie blokować zdarzenia
• event.target oznacza element kliknięty (niekoniecznie element z eventListenerem) poczytać o tym możesz tu: MDN

---

Po drugie chciałbym dać ci kilka porad:

• Do zwykłego przypisania tekstu używaj element.textContent lub element.innerText - metody te są szybsze i bezpieczniejsze
• Zamiast tylu funkcji można użyć jednej która jako parametr przyjmowała by element
• Pamiętaj że id jest niepowtarzalne więc w większej stronie tego typu id może spowodować wystąpienie błędu 

Answer 1

A może do każdego ... 

<p id="wynik1"></p>

. . .

<p id="wynik2"></p>

itd...

... dopisz contenteditable  

<p id="wynik1" contenteditable="true"></p>

. . .

<p id="wynik2" contenteditable="true"></p>

i dodanie do tego co masz już kodu, ten kod ...

[...document.querySelectorAll('p[contenteditable]')].forEach(p_wynik => {
  p_wynik.addEventListener('keypress', e => {
    const code = e.key || e.keyCode || e.which;
    if (code == 13 || code == 'Enter') {
      e.preventDefault();
      e.target.blur();
      return false;
    }
  })
});

kliknięcie w pole (tag) <p>, lewym myszy, start edycja, Enter klawisz, koniec edycji.