remove();をとある処理実行後に呼び起こす方法について知りたい。

要素にクラスを追加した直後にremove();でその要素を完全に消し去りたい。

・inputに入力したテキストが正しければその処理を実行
・fadeoutを付与させて要素を見えなくさせる
・いたずらされないようにremove();で完全に消し去る

クラス付与とremove();が同時に発生する問題が生じている。

・fadeoutが機能していないのでコレを機能させたい。

js
1 node.classList.add('fadeout');
2 node.remove();

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Service</title>
9    <link rel="stylesheet" href="css/style.css">
10</head>
11
12<body>
13    <section class="content" id="content">
14        <div class="content__wrapper wrapper">
15            <h1 class="content__title js-animation">What do you learn?</h1>
16            <div class="content__column js-animation">
17                <p class="content__text">item: <input type="text" name="item" id="itemInput"></p>
18                <p class="content__at-text none" id="atText">Please remove text charset!</p>
19                <button type="submit" id="saveBtn">move on</button>
20            </div>
21        </div>
22    </section>
23    <script src="script.js"></script>
24</body>
25
26</html>

css
1* {
2  padding: 0;
3  margin: 0;
4}
5
6html {
7  font-size: 62.5%;
8}
9
10body {
11  font-family: cursive;
12  display: -webkit-box;
13  display: -ms-flexbox;
14  display: flex;
15  -webkit-box-pack: center;
16      -ms-flex-pack: center;
17          justify-content: center;
18  -webkit-box-align: center;
19      -ms-flex-align: center;
20          align-items: center;
21  min-height: 100vh;
22  background: -webkit-gradient(linear, left top, left bottom, from(#1e90ff), to(#00008b));
23  background: linear-gradient(#1e90ff, #00008b);
24  background-size: cover;
25}
26
27input,
28textarea,
29button {
30  font-family: inherit;
31}
32
33.content__title {
34  font-size: 3.6rem;
35  color: #fff;
36  margin-bottom: 2rem;
37}
38
39.content__column {
40  display: -webkit-box;
41  display: -ms-flexbox;
42  display: flex;
43  -webkit-box-pack: center;
44      -ms-flex-pack: center;
45          justify-content: center;
46  -webkit-box-align: center;
47      -ms-flex-align: center;
48          align-items: center;
49  -webkit-box-orient: vertical;
50  -webkit-box-direction: normal;
51      -ms-flex-direction: column;
52          flex-direction: column;
53}
54
55.content__text {
56  font-size: 1.6rem;
57  color: #fff;
58}
59
60.content__at-text {
61  font-size: 1.6rem;
62  color: #fff;
63  margin-bottom: 2rem;
64}
65
66.content button {
67  font-size: 1.6rem;
68  padding: 0.5rem;
69  cursor: pointer;
70}
71
72.is-show {
73  opacity: 1;
74  visibility: visible;
75  -webkit-transform: translateY(0px);
76          transform: translateY(0px);
77  -webkit-transition: all 1s;
78  transition: all 1s;
79}
80
81.js-animation:not(.is-show) {
82  opacity: 0;
83  visibility: hidden;
84  -webkit-transform: translateY(40px);
85          transform: translateY(40px);
86}
87
88.none {
89  opacity: 0;
90  -webkit-transition: all 1s;
91  transition: all 1s;
92}
93
94.fadeout {
95  -webkit-animation: fadeOut 1s;
96          animation: fadeOut 1s;
97  -webkit-animation-fill-mode: both;
98          animation-fill-mode: both;
99}
100
101@-webkit-keyframes fadeOut {
102  0% {
103    opacity: 1;
104  }
105  100% {
106    opacity: 0;
107  }
108}
109
110@keyframes fadeOut {
111  0% {
112    opacity: 1;
113  }
114  100% {
115    opacity: 0;
116  }
117}
118/*# sourceMappingURL=style.css.map */

js
1const timerId = setInterval(() => {
2    const node = document.querySelector('.js-animation:not(.is-show)');
3    if (node !== null) {
4        node.classList.add('is-show');
5    } else {
6        clearInterval(timerId);
7    }
8}, 1000);
9
10const itemInput = document.querySelector('#itemInput');
11const saveBtn = document.querySelector('#saveBtn');
12const atText = document.querySelector('#atText');
13const node = document.querySelector('#content');
14
15
16itemInput.addEventListener('keydown', function () {
17    if (itemInput.value.length > 10) {
18        atText.classList.remove('none');
19    } else {
20        atText.classList.add('none');
21    }
22});
23
24saveBtn.addEventListener('click', function () {
25    if (itemInput.value === '') {
26        alert('文字を入力してください');
27    } else if (itemInput.value.length > 10) {
28        alert('文字数を減らしてください');
29    } else if (itemInput.value !== '' && itemInput.value.length < 10) {
30        node.classList.add('fadeout');
31        node.remove();
32    }
33});
34
35
36// const btn = document.querySelector('button');
37// btn.addEventListener('click', () => {
38//     let myDate;
39//     for (let i = 0; i < 1000000; i++) {
40//         let date = new Date();
41//         myDate = date;
42//     }
43
44//     console.log(myDate);
45
46//     let pElem = document.createElement('p');
47//     pElem.textContent = 'This is a newly-added paragraph.';
48//     document.body.appendChild(pElem);
49// });
50
51
52// function sendSub() {
53//     node.remove();
54// };
55
56
57// var syncBuyApple = function(payment) {
58//     if(payment >= 150){
59//         return {change:payment-150,error:null};
60//     } else {
61//         return {change:null, error:150-payment + '円足りません'};
62//     }
63// }
64
65// console.log('Start');
66
67// function sleep(milliSeconds) {
68//     var startTime = new Date().getTime();
69//     while (new Date().getTime() < startTime + milliSeconds);
70
71
72//     console.log(startTime);
73//     console.log('sleepが完了しました。')
74// };
75
76// sleep(3000);
77
78// console.log('end');
79
80
81// console.log('start');
82
83// function puts(str) {
84//     return new Promise(function (resolve) {
85//         setTimeout(function () {
86//             resolve(str);
87//         }, 1000);
88//     });
89// };
90
91// puts('async').then(function(result){
92//     console.log(result);
93// });
94
95// console.log('end');

試したこと

非同期処理について調べてみた。
コールバック関数について調べてみた。

js
1saveBtn.addEventListener('click', function () {
2    if (itemInput.value === '') {
3        alert('文字を入力してください');
4    } else if (itemInput.value.length > 10) {
5        alert('文字数を減らしてください');
6    } else if (itemInput.value !== '' && itemInput.value.length < 10) {
7        // node.classList.add('fadeout');
8        // node.remove();
9        function removeFadeout(el, speed) {
10            const seconds = speed / 1000;
11            el.style.transition = 'opacity' + seconds + 's ease';
12
13            el.style.opacity = 0;
14            setTimeout(function () {
15                el.parentNode.removeChild(el);
16            }, speed);
17        }
18
19        removeFadeout(document.querySelector('#content'), 2000);
20    }
21});
22