JavaScriptにてTodoListで追加したタスクにcssのスタイルを当てたい

いつも大変お世話になっております。
現在、JavaScriptの勉強を行っています。
実現したい機能はこちらになります。

insertAdjacentHTMLで動的に追加したhtml要素の<p class="item-inner">${addValue}</p>にcssで追加したスタイルを当てたいです。 alertの部分に処理を書き換えたいです。
<button class="check-btn"><i class="fas fa-check"></i></button>を押したら上記のitem-innerに、追加したcssがかかるという処理がしたいです。

またチェックボタンを押した時の機能なのですが、buttonの部分をクリックするとalertは表示されるのですがbuttonの子要素のiの部分を押すとalertが表示されなくなってしまいます。

非常に初歩的な部分でつまづいており、申し訳ありませんがご教授いただけますと幸いです。
よろしくお願い致します。

JavaScript
1'use strict';
2{
3  // DOM要素
4  const input = document.getElementById('add-value');
5  const addBtn = document.getElementById('add-btn');
6  const ul = document.getElementById('add-list');
7  const allClear = document.getElementById('all-clear');
8  
9
10  // リストが追加される関数
11  const addList = () => {
12    const addValue = input.value;
13    const addTask = `<li class="item">
14                      <p class="item-inner">${addValue}</p>
15                      <button class="check-btn"><i class="fas fa-check"></i></button>
16                     </li>`;
17    if(addValue !== '') {
18      ul.insertAdjacentHTML('beforeend', addTask);
19    }
20    document.listform.reset();
21  }
22
23  // 追加ボタンを押した時の挙動
24  addBtn.addEventListener('click', () => {
25    addList();
26  });
27
28
29
30  // チェックボタンを押した時の挙動
31   document.addEventListener('click', e => {
32    if (e.target.classList.contains('check-btn')) {
33      alert('Click');
34    }
35  });
36
37  
38  
39  
40  // タスクを全削除したときの挙動
41  allClear.addEventListener('click', () => {
42    const removeAll = confirm('全消去してもよろしいですか？');
43
44    if (removeAll) {
45      while(ul.lastChild) {
46        ul.removeChild(ul.lastChild);
47      }
48    } else {
49      alert('キャンセルしました');
50    }
51  });
52}

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>MyTodoList</title>
8  <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
9  <link rel="stylesheet" href="css/style.css">
10</head>
11<body>
12
13  <div class="todo">
14    <header class="header">
15      <h1 class="title">Todo List</h1>
16      <button id="all-clear" type="button"><i class="far fa-trash-alt"></i></button>
17    </header>
18    <form id="list-form" name="listform">
19      <input id="add-value" type="text" placeholder="予定を入力">
20      <button id="add-btn" type="button">追加</button>
21    </form>
22    <ul id="add-list">
23      
24    </ul>
25  </div>
26
27  <script src="js/main.js"></script>
28
29</body>
30</html>

css
1html {
2  font-size: 62.5%;
3}
4body {
5  font-size: 1.6rem;
6}
7button{
8  background-color: transparent;
9  border: none;
10  cursor: pointer;
11  outline: none;
12  padding: 0;
13  border: 3px solid #ccc;
14  appearance: none;
15}
16.header {
17  display: flex;
18  justify-content: space-between;
19  align-items: center;
20}
21.header h1{
22  font-weight: bold;
23  font-size: 4rem;
24}
25ul li {
26  list-style-type: disc;
27  font-size: 30px;
28  border-bottom: 2px solid rgba(189, 186, 186);
29  max-width: 500px;
30  margin: 0 auto;
31  padding: 10px 0;
32}
33.item {
34  display: flex;
35  justify-content: space-between;
36  margin-bottom: 20px;
37}
38.item-inner {
39  margin: 0;
40}
41#add-value {
42  font-size: 20px;
43}
44#all-clear {
45  display: block;
46  width: 100px;
47  font-size: 40px;
48}
49
50#add-btn {
51  font-size: 15px;
52  font-weight: bold;
53}
54
55.todo {
56  background-color: #eee;
57  max-width: 1000px;
58  margin: 0 auto;
59}
60
61.line-through {
62  text-decoration: line-through;
63  opacity: .7;
64}
65
66#add-list {
67  padding-left: 0;
68}
69
70#add-list li button {
71  font-size: 20px;
72  width: 40px;
73  vertical-align: top;
74}

yambejp

2021/03/23 01:28

HTMLと適用したいCSSを追記ください

kam__0141

2021/03/23 01:57

コメントありがとうございます。追記いたしました。適用したいcssのスタイルはline-throughというものです。

yambejp

2021/03/23 02:19

前回質問のhatena19さんの回答の補足に e.target.classList.contains('check-btn') はダメってかきましたよね？

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

回答2件

親ノードをチェックするという回答ですでについてますが、別案を。

CSSで<i>のマウスイベントを無効にします。
これだと現状のJSはそのままでOKです。

css
1#add-list li button i {
2  pointer-events: none; 
3}

CSSもcheck-btnの直前の要素(p)にクラスを追加して、そのクラスにCSSを設定すればいいでしょう。

js
1  // チェックボタンを押した時の挙動
2   document.addEventListener('click', e => {
3    if (e.target.classList.contains('check-btn')) {
4      alert('Click');
5      e.target.previousElementSibling.classList.add('selected');
6    }
7  });

css
1.item-inner.selected {
2  background-color: aqua;
3}

前回の質問のyambejpさんの回答で、closest() で自身と親要素で'check-btn`を探して取得するコードを提示してますので、それも参照してください。

投稿2021/03/23 02:28

編集2021/03/23 02:45

hatena19

総合スコア34073

kam__0141

2021/03/23 04:46

何度もご意見ありがとうございます。とてもわかりやすいです。不明点がどんどん改善されていくので、とても為になりました。かしこまりました。参照させていただきます。

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

ベストアンサー

<button ...>を押したら上記のitem-innerに、追加したcssがかかるという処理がしたいです。

対象の <p class="item-inner"> に p.classList.add('selected') のように追加のクラスを付けて、CSSで .selected のルールセットを追加すればいいですね。

buttonの子要素のiの部分を押すとalertが表示されなくなってしまいます。

<i> をクリックすると e.target が <button> ではなく <i> になります。親ノードをチェックする必要がありますね。

js
1   document.addEventListener('click', e => {
2    for (let element = e.target; element; element = element.parentNode) {
3      if (element.classList.contains('check-btn')) {
4        // element は <button>
5        element.previousElementSibling.classList.add('selected');
6        return;
7      }
8    }
9  });