Clear Form Fields onclick

Question

I have a table in a form that looks like this:

<table class="table-0">
  <tbody>
        <tr>
            <td style="width: auto;" class="center">1</td>
            <td style="width: auto; max-width: 100%;"><input class="form-required stream1" type="text" name="stream1h" id="stream1h" maxlength="50" value="Dfd"></td>
            <td style="width: auto;" class="center">v</td>
            <td style="width: auto; max-width: 100%;"><input class="form-required stream1" type="text" name="stream1a" id="stream1a" maxlength="50" value="Dfdd"></td>
            <td style="width: auto;" class="center"><a onclick="clearFields('1')">Delete</a></td>
        </tr>
        <tr>
            <td style="width: auto;" class="center">2</td>
            <td style="width: auto; max-width: 100%;"><input class="form-required stream2" type="text" name="stream2h" id="stream2h" maxlength="50" value=""></td>
            <td style="width: auto;" class="center">v</td>
            <td style="width: auto; max-width: 100%;"><input class="form-required stream2" type="text" name="stream2a" id="stream2a" maxlength="50" value=""></td>
            <td style="width: auto;" class="center"><a onclick="clearFields('2')">Delete</a></td>
        </tr>
        <tr>
            <td style="width: auto;" class="center">3</td>
            <td style="width: auto; max-width: 100%;"><input class="form-required stream3" type="text" name="stream3h" id="stream3h" maxlength="50" value=""></td>
            <td style="width: auto;" class="center">v</td>
            <td style="width: auto; max-width: 100%;"><input class="form-required stream3" type="text" name="stream3a" id="stream3a" maxlength="50" value=""></td>
            <td style="width: auto;" class="center"><a onclick="clearFields('3')">Delete</a></td>
        </tr>
        <tr>
            <td style="width: auto;" class="center">4</td>
            <td style="width: auto; max-width: 100%;"><input class="form-required stream4" type="text" name="stream4h" id="stream4h" maxlength="50" value=""></td>
            <td style="width: auto;" class="center">v</td>
            <td style="width: auto; max-width: 100%;"><input class="form-required stream4" type="text" name="stream4a" id="stream4a" maxlength="50" value=""></td>
            <td style="width: auto;" class="center"><a onclick="clearFields('4')">Delete</a></td>
        </tr>
  </tbody>
</table>

It's a home and away list of competitors that are playing against each other in 4 events.

And I have a script that looks like this:

<script>
function clearFields(number) {
  var class = 'stream' + number;
  document.getElementsByClassName(class).value = '';
}
</script>

The idea is that when I click on the Delete text, the 2 fields that have the required Class ID stream1/2/3/4 are cleared on the page.

But it isn't working.

The contents of the fields are stored in text files and I'd really like to delete the contents of the text files at the same time as clearing the field in the browser.

Any help appreciated.