Javascript 如何动态显示/隐藏导航按钮？

当项目位于列表顶部时，我需要删除“向上”按钮；当项目位于列表底部时，我需要删除“向下”按钮

我试图编写一些代码，但当我删除按钮时，它们就不再永久存在，只有当项目位于顶部或底部时，我才需要这样做

我试图解决这个问题，但我不知道如何解决，有人能帮我吗？我不熟悉JavaScript语言

功能附件按钮（列表）{
让upButton=document.createElement（'button'）；
upButton.className='up'；
upButton.textContent='Up'
列表。追加子项（向上按钮）；
let downButton=document.createElement（'button'）；
downButton.className='down'；
downButton.textContent='Down'；
list.appendChild（向下按钮）；
让removeButton=document.createElement（'button'）；
removeButton.className='remove'；
removeButton.textContent='Remove'；
list.appendChild（removeButton）；
};
const ul=document.getElementsByTagName（'ul'）[0]；
const existingLi=ul.children；
for（设i=0；i{
让liItem=document.createElement（'li'）；
设pItem=document.createElement（'p'）；
pItem.textContent=input.value；
liItem.appendChild（pItem）；
附件按钮（项目）；
ul.附属物（LI项）；
input.value=''；
});
ul.addEventListener（'点击'，（事件）=>{
让liItem=event.target.parentNode；
如果（event.target.className=='remove'）{
ul.removeChild（LI项目）；
}
如果（event.target.className=='up'）{
让prevLi=liItem.previousElementSibling；
if（prevLi）{
ul.插入前（liItem，prevLi）；
}
}
如果（event.target.className=='down'）{
设nextLi=liItem.nextElementSibling；
如果（下一个）{
ul.插入前（下一项，liItem）；
} 
}
});
const liFirstChild=ul.firstElementChild；
const firstChildButton=liffirstChild.querySelector（'.up'）；
//liffirstchild.removeChild（firstchild按钮）；
const liLastChild=ul.lastElementChild；
const lastChildButton=liLastChild.querySelector（'.down'）；
//liLastChild.removeChild（lastchild按钮）
正文{
背景#f1f1；
字体系列：arial，无衬线；
}
.集装箱{
宽度：600px；
高度：自动；
保证金：0自动5px；
填充：40px 20px；
边界半径：5px；
背景：白色；
文本对齐：居中；
}
h1{
字体大小：24px；
颜色：#000；
利润率：0.10px；
填充：0；
}
p{
字体大小：12px；
颜色：#666；
利润率：0.20px；
填充：0；
}
输入{
最小宽度：180px；
高度：30px；
边框：1px实心#999；
边界半径：3px 0 3px；
保证金：0；
填充：0 10px；
}
.添加{
高度：32px；
背景#f1f1；
边框：1px实心#999；
边界半径：0 3px 3px 0；
颜色：#333；
保证金：0-5px；
填充：0 10px；
}
保险商实验室{
列表样式：无；
文本对齐：左对齐；
利润率：40px0；
字体大小：14px；
颜色：#666；
}
李{
高度：自动；
边框底部：1px实心#ccc；
利润率：10px0；
填充：5px0；
}
李：之后{
内容：“.”；
可见性：隐藏；
显示：块；
身高：0；
明确：两者皆有；
}
李平{
利润率：10px 30px 0；
填充：0；
背景：白色；
浮动：左；
}
.向上，.向下{
背景：白色；
边框：1px实心#999；
边界半径：2px；
颜色：#999；
保证金：0；
填充物：5px10px；
}
.移除{
背景：白色；
边框：1px纯红；
边界半径：2px；
颜色：红色；
保证金：0；
填充物：5px10px；
}

穿越
汽车清单
我喜欢的汽车清单

加车


宝马M5



保时捷911 Turbo



美塞德斯A250 AMG



您只需使用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;
    }

太好了！我是如此沉迷于javascript，以至于我没有想到其他方法