0
アイテムがリストの一番上にある場合、「上へ」ボタンを削除する必要があります。アイテムがリストの一番下にあるときは、「下へ」ボタンを削除する必要があります。ナビゲーションボタンを表示/非表示にするにはどうすればよいですか？
私はいくつかのコードを実行しようとしましたが、私はボタンを削除するとき、彼らは永久に存在しなくなると、私はアイテムが、私はこの問題を解決しようとしている上部または下部
である場合にのみ、これを実行する必要がありますしかし、私はどのように、誰も私を助けることはできませんか？私はJavaScript言語が初めてです。
function attachButtons(list){
\t let upButton = document.createElement('button');
\t upButton.className = 'up';
\t upButton.textContent = 'Up'
\t list.appendChild(upButton);
\t let downButton = document.createElement('button');
\t downButton.className = 'down';
\t downButton.textContent ='Down';
\t list.appendChild(downButton);
\t let removeButton = document.createElement('button');
\t removeButton.className = 'remove';
\t removeButton.textContent = 'Remove';
\t list.appendChild(removeButton);
};
const ul = document.getElementsByTagName('ul')[0];
const existingLi = ul.children;
for(let i = 0; i < existingLi.length; i++){
\t attachButtons(existingLi[i]);
}
const input = document.getElementsByTagName('input')[0];
const addButton = document.getElementsByClassName('add')[0];
addButton.addEventListener('click',() => {
\t let liItem = document.createElement('li');
\t let pItem = document.createElement('p');
\t pItem.textContent = input.value;
\t liItem.appendChild(pItem);
\t attachButtons(liItem);
\t ul.appendChild(liItem);
\t input.value = '';
});
ul.addEventListener('click', (event) => {
\t let liItem = event.target.parentNode;
\t if(event.target.className == 'remove'){
\t \t ul.removeChild(liItem);
\t }
\t if(event.target.className == 'up'){
\t \t let prevLi = liItem.previousElementSibling;
\t \t if(prevLi){
\t \t \t ul.insertBefore(liItem, prevLi);
\t \t }
\t }
\t if(event.target.className == 'down'){
\t \t let nextLi = liItem.nextElementSibling;
\t \t if(nextLi){
\t \t \t ul.insertBefore(nextLi, liItem);
\t \t }
\t }
});
const liFirstChild = ul.firstElementChild;
const firstChildButton = liFirstChild.querySelector('.up');
//liFirstChild.removeChild(firstChildButton);
const liLastChild = ul.lastElementChild;
const lastChildButton = liLastChild.querySelector('.down');
//liLastChild.removeChild(lastChildButton);body {
\t background: #f1f1f1;
\t font-family: arial, sans-serif;
}
.container {
\t width: 600px;
\t height: auto;
\t margin: 0 auto 5px;
\t padding: 40px 20px;
\t border-radius: 5px;
\t background: white;
\t text-align: center;
}
h1 {
\t font-size: 24px;
\t color: #000;
\t margin: 0 0 10px;
\t padding: 0;
}
p {
\t font-size: 12px;
\t color: #666;
\t margin: 0 0 20px;
\t padding: 0;
}
input {
\t min-width: 180px;
\t height: 30px;
\t border: 1px solid #999;
\t border-radius: 3px 0 0 3px;
\t margin: 0;
\t padding: 0 10px;
}
.add {
\t height: 32px;
\t background: #f1f1f1 \t ;
\t border: 1px solid #999;
\t border-radius: 0 3px 3px 0;
\t color: #333;
\t margin: 0 0 0 -5px;
\t padding: 0 10px;
}
ul {
\t list-style: none;
\t text-align: left;
\t margin: 40px 0 0;
\t font-size: 14px;
\t color: #666;
}
li {
\t height: auto;
\t border-bottom: 1px solid #ccc;
\t margin: 10px 0 0;
\t padding: 5px 0;
}
li:after {
\t content: ".";
\t visibility: hidden;
\t display: block;
\t height: 0;
\t clear: both;
}
li p {
\t margin: 10px 30px 0 0;
\t padding: 0;
\t background: white;
\t float: left;
}
.up, .down {
\t background: white;
\t border: 1px solid #999;
\t border-radius: 2px;
\t color: #999;
\t margin: 0;
\t padding: 5px 10px;
}
.remove {
\t background: white;
\t border: 1px solid red;
\t border-radius: 2px;
\t color: red;
\t margin: 0;
\t padding: 5px 10px;
}<!doctype html>
<html>
\t <head>
\t \t <link rel="stylesheet" href="style.css">
\t \t <title>Traversing</title>
\t </head>
\t <body>
\t \t <div class="container">
\t \t \t <h1>List of Cars</h1>
\t \t \t <p>A list of cars I love</p>
\t \t \t <div>
\t \t \t \t <input type="text">
\t \t \t \t <button class="add">Add Car</button>
\t \t \t </div>
\t \t \t <ul>
\t \t \t \t <li>
\t \t \t \t \t <p>BMW M5</p>
\t \t \t \t </li>
\t \t \t \t <li>
\t \t \t \t \t <p>Porche 911 Turbo</p>
\t \t \t \t </li>
\t \t \t \t <li>
\t \t \t \t \t <p>Mercedez A250 AMG</p>
\t \t \t \t </li>
\t \t \t </ul>
\t \t </div>
\t \t <script src="app.js"></script>
\t </body>
</html>
グレート！私は他の方法を考えていないほどjavascriptに没頭しています Tks –