How to clear elements of a <table> line when clicking a button?

Question

I need to create a function that the user click on the "Clear" button, all fields input of each line of table be cleaned.

I managed to perform these functions, however, I had to create a function for each button of each line!

function removeLinha1() {
   document.getElementById("soma1").value = "";
   document.getElementById("soma2").value = "";
   document.getElementById("resultado1").value = "";
}

function removeLinha2() {
   document.getElementById("subt1").value = "";
   document.getElementById("subt2").value = "";
   document.getElementById("resultado2").value = "";
}

function removeLinha3() {
   document.getElementById("mult1").value = "";
   document.getElementById("mult2").value = "";
   document.getElementById("resultado3").value = "";
}

function removeLinha4() {
   document.getElementById("divi1").value = "";
   document.getElementById("divi2").value = "";
   document.getElementById("resultado4").value = "";
}

<table class="class-table">
   <tr>
      <td> <input size="3" type="text" id="soma1" /> </td>
      <td> <input size="3" type="text" id="soma2" /> </td>
      <td> <button class="class-button" onclick="somar()">+</button> </td>
      <td>=</td>
      <td> <input type="text" size="10" placeholder="Resultado" id="resultado1" readonly="true" /> </td>
      <td> <button class="class-buttonClear" onclick="removeLinha1()">Limpar</button></td>
   </tr>

   <tr>
      <td> <input size="3" type="text" id="subt1" /> </td>
      <td> <input size="3" type="text" id="subt2" /> </td>
      <td> <button class="class-button" onclick="subtrair()">-</button> </td>
      <td>=</td>
      <td> <input type="text" size="10" placeholder="Resultado" id="resultado2" readonly="true" /> </td>
      <td> <button class="class-buttonClear" onclick="removeLinha2()">Limpar</button></td>
   </tr>

   <tr>
      <td> <input size="3" type="text" id="mult1" /> </td>
      <td> <input size="3" type="text" id="mult2" /> </td>
      <td> <button class="class-button" onclick="multiplicar()">*</button> </td>
      <td>=</td>
      <td> <input type="text" size="10" placeholder="Resultado" id="resultado3" readonly="true" /> </td>
      <td> <button class="class-buttonClear" onclick="removeLinha3()">Limpar</button></td>
   </tr>

   <tr>
      <td> <input size="3" type="text" id="divi1" /> </td>
      <td> <input size="3" type="text" id="divi2" /> </td>
      <td> <button class="class-button" onclick="dividir()">/</button> </td>
      <td>=</td>
      <td> <input type="text" size="10" placeholder="Resultado" id="resultado4" readonly="true" /> </td>
      <td> <button class="class-buttonClear" onclick="removeLinha4()">Limpar</button></td>
   </tr>

</table>

How can I make it so that there is one ONLY function to clear these values?

Answer 1

Learn to use event listeners (Event listeners) instead of attributes onclick. Then you use the class that exists on each button of the lines - in your case, if the class class-buttonClear is just for that purpose, or else add another specific class to it.

Use document.querySelectorAll(".class-buttonClear") to select all buttons by class, then go through them all with forEach adding in each one eventListener with the type click and the return will be a function that will select the line tr where is the button clicked that will select all the elements input making another forEach (running through one by one) changing the value for empty:

document.querySelectorAll(".class-buttonClear").forEach(function(el){
   el.addEventListener("click", function(){
      this.closest("tr").querySelectorAll("input").forEach(function(el){
         el.value = '';
      });
   });
});

<table class="class-table">
   <tr>
       <td> <input size="3" type="text" id="soma1"/> </td>
       <td> <input size="3" type="text" id="soma2"/> </td>
       <td> <button class="class-button" onclick="somar()">+</button> </td>
       <td>=</td>
       <td> <input type="text" size="10" placeholder="Resultado" id="resultado1" readonly="true"/> </td>
       <td> <button class="class-buttonClear">Limpar</button></td>
   </tr>

   <tr>
       <td> <input size="3" type="text" id="subt1"/> </td>
       <td> <input size="3" type="text" id="subt2"/> </td>
       <td> <button class="class-button" onclick="subtrair()">-</button> </td>
       <td>=</td>
       <td> <input type="text" size="10" placeholder="Resultado" id="resultado2" readonly="true"/> </td>
       <td> <button class="class-buttonClear">Limpar</button></td>
   </tr>

   <tr>
       <td> <input size="3" type="text" id="mult1"/> </td>
       <td> <input size="3" type="text" id="mult2"/> </td>
       <td> <button class="class-button" onclick="multiplicar()">*</button> </td>
       <td>=</td>
       <td> <input type="text" size="10" placeholder="Resultado" id="resultado3" readonly="true"/> </td>
       <td> <button class="class-buttonClear">Limpar</button></td>
   </tr>

   <tr>
       <td> <input size="3" type="text" id="divi1"/> </td>
       <td> <input size="3" type="text" id="divi2"/> </td>
       <td> <button class="class-button" onclick="dividir()">/</button> </td>
       <td>=</td>
       <td> <input type="text" size="10" placeholder="Resultado" id="resultado4" readonly="true"/> </td>
       <td> <button class="class-buttonClear">Limpar</button></td>
   </tr>

</table>

Using the same principle, you can do the same for the buttons of mathematical operations without having to create a function for each thing and several id'different s for each element (soma1, soma2, etc..).