Hello I am trying to make 3 unordered lists where there is a delete button. Once I click that delete icon, it should remove (display:none) that list and the other two should remain the same. I am able to achieve this functionality with 3 different functions. But, I want to achieve this result with a single function. Please help and I want to use only javascript here and not jQuery or angular. Here is my code - 

1st list

```
<ul class="board" id="today_list">
    <h4>Today <span class="delete_list" onclick="deleteList()">delete</span></h4>
    <li id="ta">Today's Task 1</li>
</ul>

```

2nd list

```
<ul class="board" id="week_list">
    <h4>Today <span class="delete_list" onclick="deleteListWeek()">delete</span></h4>
    <li id="wa">Week's Task 1</li>
</ul>

```

3rd List

```
<ul class="board" id="month_list">
    <h4>Today <span class="delete_list" onclick="deleteListMonth()">delete</span></h4>
    <li id="ma">Month's Task 1</li>
</ul>

```

Here is the javascript function for one list, I created same 2 other functions for the rest 2 lists

```
function deleteList(){
    var deleteList = this.document.getElementById('today_list');
    deleteList.style.display = "none";
}

```