関数内で違う関数から値を受け取りたい。

前提

・現在タスク管理のプログラムを書いています。
・各タスクに削除ボタンを格納して押した際にそのタスクを削除したいです。
・タスクを追加する際にtrタグが生成される度にtodo.lengthを用いて別々のidを与えました。

実現したいこと

・creteDeleteButton()でtrのidを受け取りたいです。

知りたい事

・改善に必要な知識
・どの様な点が間違っているのか
・必読のサイトなど（自分なりに調べはしましたが解決までいたりませんでした。）

発生している問題

・「タスク追加関数」　の前に　「削除ボタン生成関数」　を実行しているのですが削除ボタン生成関数でタスク追加関数内で定義したtrを受け取りたいのですが関数の実行順番を変えられず受け取れません。

該当のソースコード

function createDeleteButton(){
  // const todos = todosPush();
  const deleteButton = document.createElement('input');
  deleteButton.type = 'button';
  deleteButton.value = '削除'
  //タスクを削除する
  deleteButton.addEventListener('click' ,()=>{
    
    console.log(tr.id);
  })
  return deleteButton;
}

//追加を押したときにタスクを追加する
document.getElementById('add-button').addEventListener('click', () =>{
  todosPush();
  const workButton = createWorkButton();
  const deleteButton = createDeleteButton();
  tbodyAddTodo(workButton,deleteButton);

})

'use strict'

const tbody = document.getElementById('tbody');
const addTask = document.getElementById('add-task');
const todos = [];

function todosPush(){
  const todo = {
    number:todos.length ,
    task:addTask.value,
    work:'作業中'
  }
  todos.push(todo);
  return todos;
}
function createWorkButton(){
  const workButton = document.createElement('input');
  workButton.type = 'button';
  workButton.value = '作業中'
  return workButton;
}
function createDeleteButton(){
  // const todos = todosPush();
  const deleteButton = document.createElement('input');
  deleteButton.type = 'button';
  deleteButton.value = '削除'
  //タスクを削除する
  deleteButton.addEventListener('click' ,()=>{
    
    console.log(tr.id);
  })
  return deleteButton;
}
function tbodyAddTodo(workButton,deleteButton){
  //パーツを作り変数化する
  const tr = document.createElement('tr');
  const tdLength = document.createElement('td')
  const tdAddTask = document.createElement('td');
  const workingTd = document.createElement('td');
  workingTd.appendChild(workButton);
  const deleteTd = document.createElement('td');
  deleteTd.appendChild(deleteButton);
  //パーツを表示する
  tdLength.textContent = todos.length-1;
  tdAddTask.textContent = addTask.value;
  tr.appendChild(tdLength);
  tr.appendChild(tdAddTask);
  tr.appendChild(workingTd);
  tr.appendChild(deleteTd);

  tr.id = `tr${todos.length-1}`;
  console.log(tr.id);
  tbody.appendChild(tr);
  return tr;
}

//追加を押したときにタスクを追加する
document.getElementById('add-button').addEventListener('click', () =>{
  todosPush();
  const workButton = createWorkButton();
  const deleteButton = createDeleteButton();
  tbodyAddTodo(workButton,deleteButton);

})

html
1  <!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>MENTA課題③</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10
11  <h1>ToDoリスト</h1>
12  <div id="radio-buttons">
13    <input type="radio">すべて
14    <input type="radio">作業中
15    <input type="radio">完了
16  </div>
17
18
19  <div id="tasks">
20    <table id="table">
21      <thead>
22        <tr id="th">
23          <th>ID</th>
24          <th>コメント</th>
25          <th>状態</th>
26        </tr>
27      </thead>
28      <tbody id="tbody">
29      </tbody>
30    </table>
31  </div>
32
33  <h2>新規タスクの追加</h2>
34
35  <div id="add-tasks">
36    <input id="add-task" type="text">
37    <input id="add-button" type="button" value="追加">
38  </div>
39  
40  <script src="main.js">
41  </script>
42</body>
43</html>

試したこと

デバッグなどでtrが受け取れているか確認しましたが受け取れていなかったので、問題は　「削除ボタン生成関数」　で値をうけとる所にあります。そこまでは理解しているつもりです。

補足情報（FW/ツールのバージョンなど）

削除ボタンをタスク追加関数内で使うので関数の順番が変えられません。

vsコードを用いています。最新です。

yambejp

2020/06/06 08:10

現状なにをしたらどうなるという説明が必要かもなにも動作しないので、どこをどう修正すべきかも仕様がわからないと回答がしづらいです

youyaku

2020/06/06 09:57

すみません。htmlを部分だけ切り取り必要な部分だけを表示させたのですが説明が表示されませんでした。削除するコードが完成されていないから、と言う事ですか？？それともそもそも追加すらできないと言う事ですか？？

行動規範の内容に同意します

回答2件

とりあえず

javascript
1function createDeleteButton(){
2  const deleteButton = document.createElement('input');
3  deleteButton.type = 'button';
4  deleteButton.value = '削除';
5  deleteButton.addEventListener('click',e=>{
6    var tr=e.target.closest('tr');
7    tr.parentNode.removeChild(tr);
8  })
9  return deleteButton;
10}
11