Wie navigiere ich dynamisch Schaltflächen?

Question

Wenn ein Element an der Spitze der Liste ist, muss ich die Schaltfläche "nach oben" entfernen und wenn ein Element am Ende der Liste ist, muss ich die Schaltfläche "nach unten" entfernen.

Ich habe versucht, einen Code zu tun, aber wenn ich die Tasten zu entfernen, hören sie dauerhaft zu existieren, und ich muß dies nur tun, wenn das Element am oberen oder unteren

Ich versuche, dieses Problem zu lösen aber ich habe keine Ahnung wie, kann mir jemand helfen? Ich bin neu in der JavaScript-Sprache.

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>

Answer 1

Sie können es tun, nur mit CSS:

/*2nd element (up) in first li is not displayed */ 
    ul li:first-child > :nth-child(2) { 
     display:none; 
    } 
    /*3rd element (down) in last li is not displayed */ 
    ul li:last-child > :nth-child(3) { 
     display:none; 
    } 

codepen example