該当する要素を配列から削除したい

前提・実現したいこと

javascriptでtodolistの作成をしています。
チェックボックスにチェックされている行を「選択削除」ボタンで削除したいです。html上から削除することは出来たのですが、「登録」ボタンを押すと削除される前に戻ってしまいます。恐らく配列から削除する処理ができていないからだと思いますが、その処理のやり方がわかりません。

発生している問題・エラーメッセージ

selectDelete.addEventListener('click', () =>{
  var select = document.getElementsByName("targetitems");
  console.log(todolists);
  for(let i=0; i<select.length; i++){
    if(select[i].checked){
      console.log(select[i].parentNode.parentNode);
      var el = select[i].parentNode.parentNode;
      el.remove();
    }
  }
});
この部分に配列から削除する処理を追記したいです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css"></link>
    <title>Todolist</title>
  </head>
  <body>
    <header>
      <h1>Todolist</h1>
    </header>

    <div class="container">
      <div class="main">
        <!-- 登録内容入力 -->
        <div class="input-area">
          <input id="todo" type="text" placeholder="予定">
          <input id="money" type="text" placeholder="予算">
          <input id="datetime" type="datetime-local">
          <input id="place" type="text" placeholder="場所">
          <input id="obj" type="text" placeholder="持ち物">
          <input id="memo" type="text" placeholder="メモ">
        </div>

        <!-- 登録、削除、一括削除ボタン -->
        <div class="btn-area">
          <button id="addButton" class="btn-1">登録</button>
          <button id="allDelete" class="btn-2">全削除</button>
          <button id="selectDelete" class="btn-3">選択削除</button>
        </div>

        <!-- 表 -->
        <div class="table-area">
          <form name="form1" action="">
            <table border="1">
              <thead>
                  <th></th>
                  <th>ID</th>
                  <th>予定</th>
                  <th>予算</th>
                  <th>日時</th>
                  <th>場所</th>
                  <th>持ち物</th>
                  <th>メモ</th>
                  <th></th>
              </thead>
              <tbody id="tableBody">

              </tbody>
            </table>
          </form>
        </div>
      </div class="main">
    </div class="container">

    <script src = "app.js"></script>

  </body>

</html>



'use strict';

let todolists = [];

const todo = document.getElementById('todo');
const money = document.getElementById('money');
const dt = document.getElementById('datetime');
const place = document.getElementById('place');
const obj = document.getElementById('obj');
const memo = document.getElementById('memo');
const addButton = document.getElementById('addButton');
const tableBody = document.getElementById('tableBody');
const allDelete = document.getElementById('allDelete');
const selectDelete = document.getElementById('selectDelete');

function formatDate(date){
  var y = date.getFullYear()
  var m = ("00" + (date.getMonth() + 1)).slice(-2)
  var d = ("00" + date.getDate()).slice(-2)
  var hh = ("00" + date.getHours()).slice(-2)
  var mm = ("00" + date.getMinutes()).slice(-2)
  var ss = ("00" + date.getSeconds()).slice(-2)
  var result = y + "/" + m + "/" + d + "  " + hh + ":" + mm + ":" + ss;
  return result
};


addButton.addEventListener('click', () =>{
  var datetime = document.getElementById('datetime');
  console.log(datetime.value, 'datetime .value');



  if(todo.value == ''){
    alert('予定を入力してください');
    return;
  }else{
    let displayMoney = money.value == '' ? '0' : money.value;
    let displayDatetime = datetime.value == '' ? '' : formatDate(new Date(datetime.value));

    const todoList = {
      todo: todo.value,
      money: displayMoney + '円',
      datetime: displayDatetime,
      place: place.value,
      obj: obj.value,
      memo: memo.value,
    };
    if (todoList) {
      todolists.push(todoList);
      todo.value = '';
      money.value = '';
      datetime.value = '';
      place.value = '';
      obj.value = '';
      memo.value = '';
      showTodos();
    };
  };
});

const showTodos = () => {
  tableBody.textContent = '';
  todolists.forEach((todolist, number) => {
    const tableRecord = document.createElement('tr');
    tableBody.appendChild(tableRecord);

    const tableCheck = document.createElement('td');
    const tableId = document.createElement('td');
    const tableTodo = document.createElement('td');
    const tableMoney = document.createElement('td');
    const tableDatetime = document.createElement('td');
    const tablePlace = document.createElement('td');
    const tableObj = document.createElement('td');
    const tableMemo = document.createElement('td');
    const tableAction = document.createElement('td');

    tableId.textContent = number + 1;
    tableTodo.textContent = todolist.todo;
    tableMoney.textContent = todolist.money;
    tableDatetime.textContent = todolist.datetime;
    tablePlace.textContent = todolist.place;
    tableObj.textContent = todolist.obj;
    tableMemo.textContent = todolist.memo;

    tableRecord.appendChild(tableCheck);
    tableRecord.appendChild(tableId);
    tableRecord.appendChild(tableTodo);
    tableRecord.appendChild(tableMoney);
    tableRecord.appendChild(tableDatetime);
    tableRecord.appendChild(tablePlace);
    tableRecord.appendChild(tableObj);
    tableRecord.appendChild(tableMemo);
    tableRecord.appendChild(tableAction);

    tableCheck.appendChild(createCheckbox(tableRecord));
    tableAction.appendChild(createDeleteButton(tableRecord));
  });
};

const createDeleteButton = (tableRecord) => {
  const index = tableRecord.rowIndex-1;
  const deleteButton = document.createElement('button');
  deleteButton.textContent = '削除';
  deleteButton.addEventListener('click', () => {
    console.log(index);
    todolists.splice(index, 1);
    showTodos()
  });
  return deleteButton;
};

const createCheckbox = () => {
  const checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  checkbox.setAttribute('name','targetitems');
  return checkbox;
};

allDelete.addEventListener('click', () =>{
  todolists = [];
  showTodos();
});

selectDelete.addEventListener('click', () =>{
  var select = document.getElementsByName("targetitems");
  console.log(todolists);
  for(let i=0; i<select.length; i++){
    if(select[i].checked){
      console.log(select[i].parentNode.parentNode);
      var el = select[i].parentNode.parentNode;
      el.remove();
    }
  }
});

試したこと

該当する要素のインデックスを取得するやり方を調べてみたがわからなかった。

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

VS codeで書いています。

int32_t

2021/03/23 03:13

> 恐らく配列から削除する処理ができていないからだと思いますが、どこのコードに問題がありそうか書いておいていただけると回答者の時間の節約になります。「selectDelete.addEventListener('click' 」のあたりで合ってますか。

higano_0506

2021/03/23 03:37

ご指摘ありがとうございます。問題がありそうなコードを追記させていただきます。今回の質問に関してはおっしゃる通り、おそらくselectDelete.addEventListenerの部分だと思います。

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

回答2件

ベストアンサー

targetitems と todolists は1対1対応しているのですよね。

であれば、for(let i=0; i<select.length; i++){ このループの中で todolist[i] も削除すれば良いのではないでしょうか。

ただし、ループしながら項目を削除するのは意外と問題が起きやすいです。現在のコードでも、選択された項目が2つ連続していると2つ目は削除されないと思います。

そういう問題が起きないように、できるだけ標準の機能を使って削除しましょう。

js
1  var select = document.getElementsByName("targetitems");
2  todolists = todolists.filter((item, i) => !select[i].checked);
3  showTodos();

投稿2021/03/23 03:26

int32_t

総合スコア20882

higano_0506

2021/03/23 06:48

確認したらチェックボックスは配列の中に追加できていませんでした。登録ボタンを押したときにチェックボックスを生成して配列の中に追加する方法を教えていただきたいです。

int32_t

2021/03/23 06:57

> 確認したらチェックボックスは配列の中に追加できていませんでした。何の配列ですか? showTodos() の中で <input type=checkbox name=targetitems> を生成しているから、TODOエントリ1つにつき1つのチェックボックスがあるのですよね?

higano_0506

2021/03/23 07:20

todolistsの中にチェックボックスは無いです。TODOエントリ一つにつき一つのチェックボックスは生成してあります。回答のコードを書いたらうまくいったのですが、なぜ配列にチェックボックスは無いのにselect[i].checkedで配列から削除できるのでしょうか、、、勉強不足で申し訳ありません、、、

int32_t

2021/03/23 08:08 編集

todolists にチェックボックスのプロパティを足すことは可能ではありますけど、今はする必要ないと思いますよ。 > なぜ配列にチェックボックスは無いのにselect[i].checkedで配列から削除できるのでしょうか todolists[i] に対応するチェックボックスが select[i] だから、です。todolists内の順番と画面上の <input type=checkbox name=targetitems> の順番が一致しているので、配列内の位置だけで対応付けができます。「テーブルを日時でソートしたい」なんてなると動かなくなりますので、そのときは別の手段で画面とデータの対応付けをする必要があります。

higano_0506

2021/03/23 08:22

分かりやすい説明ありがとうございます。何となくわかりましたが、filterの理解がまだまだなのでもっと自分で調べたり使って覚えようと思います。

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

javascript
1selectDelete.addEventListener('click', () =>{
2  const all=[...document.querySelectorAll("[name=targetitems]")];
3  const checked=[...document.querySelectorAll("[name=targetitems]:checked")];
4  checked.map(x=>all.indexOf(x)).reverse().forEach(x=>{
5    all[x].closest('tr').remove();
6    todolists.splice(x,1);
7  });
8});