CODEWITHSUNDEEP
javascripthtmlcss
Akshay
Akshay

Reputation: 391

Delete list button for different ids

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";
}

Upvotes: 0

Views: 90

Answers (4)

red
red

Reputation: 1

function deleteList(btn){
    btn.parentNode.parentNode.style.display = "none"
}

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

Upvotes: 0

Deepak Kumar
Deepak Kumar

Reputation: 51

//you can pass this id of the list in the function itself:


function deleteList(id) {
  var deleteList = this.document.getElementById(id);
  deleteList.style.display = "none";
}
<ul class="board" id="today_list">
  <h4>Today <span class="delete_list" onclick="deleteList('today_list')">delete</span></h4>
  <li id="ta">Today's Task 1</li>
</ul>
<ul class="board" id="week_list">
  <h4>Today <span class="delete_list" onclick="deleteList('week_list')">delete</span></h4>
  <li id="wa">Week's Task 1</li>
</ul>
<ul class="board" id="month_list">
  <h4>Today <span class="delete_list" onclick="deleteList('month_list')">delete</span></h4>
  <li id="ma">Month's Task 1</li>
</ul>

Upvotes: 1

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

pass id name in onclick function and set id into javascript

function deleteList(id) {
  var deleteList = this.document.getElementById(id);

  deleteList.style.display = "none";
}
<ul class="board" id="today_list">
  <h4>Today <span class="delete_list" onclick="deleteList('today_list')">delete</span></h4>
  <li id="ta">Today's Task 1</li>
</ul>

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

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

Upvotes: 3

Tushar Walzade
Tushar Walzade

Reputation: 3809

Here is working code - 

function deleteList(id){
    var deleteList = this.document.getElementById(id);
    deleteList.style.display = "none";
}
<ul class="board" id="today_list">
    <h4>Today <span class="delete_list" onclick="deleteList('today_list')">delete</span></h4>
    <li id="ta">Today's Task 1</li>
</ul>
<ul class="board" id="week_list">
    <h4>Today <span class="delete_list" onclick="deleteList('week_list')">delete</span></h4>
    <li id="wa">Week's Task 1</li>
</ul>
<ul class="board" id="month_list">
    <h4>Today <span class="delete_list" onclick="deleteList('month_list')">delete</span></h4>
    <li id="ma">Month's Task 1</li>
</ul>

Upvotes: 2

Related Questions