Question

您好我正在尝试制作3个无序列表，其中有一个删除按钮。一旦我点击该删除图标，它应该删除（显示：无）该列表，其他两个应保持不变。我能够通过3种不同的功能实现这一功能。但是，我想用一个函数来实现这个结果。请帮忙，我想在这里只使用javascript而不是jQuery或angular。这是我的代码 -

第一个清单

<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>

第二个清单

<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>

第三名单

<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>

这是一个列表的javascript函数，我为其余2个列表创建了相同的2个其他函数

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

Answer 1

传递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>

Answer 2

这是工作代码 -

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>

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

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>

删除不同ID的列表按钮

4 个答案: