Из множества одинакових HTML елементов, удалить только нажатый

У меня блок состоит из 25 одинаковых элементов, и на каждый из них я наложил onclick, чтобы в js написать функцию удаления этого элемента. Но при нажатии на любой из этих элементов удаляется только первый, а не нажатый. Как это исправить, подскажите пожалуйста.

<div class="matches_block">
        <div class="match" onclick="disappear()">
            <div class="head_match"></div>
            <div class="body_math"></div>
        </div>
        <div class="match" onclick="disappear()">
            <div class="head_match"></div>
            <div class="body_math"></div>
        </div>
        <div class="match" onclick="disappear()">
            <div class="head_match"></div>
            <div class="body_math"></div>
        </div>
        <div class="match" onclick="disappear()">
            <div class="head_match"></div>
            <div class="body_math"></div>
        </div>

JS

function disappear(){
const match = document.querySelector('.match');
match.classList.toggle('active');}