Question

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

我尝试做一些代码，但是当我删除按钮时，它们会永久停止存在，我只有在项目位于顶部或底部时才需要这样做

我正在努力解决这个问题，但我不知道怎么样，有人可以帮助我吗？我是JavaScript语言的新手。

function attachButtons(list){
	let upButton = document.createElement('button');
	upButton.className = 'up';
	upButton.textContent = 'Up'
	list.appendChild(upButton);

	let downButton = document.createElement('button');
	downButton.className = 'down';
	downButton.textContent ='Down';
	list.appendChild(downButton);

	let removeButton = document.createElement('button');
	removeButton.className = 'remove';
	removeButton.textContent = 'Remove';
	list.appendChild(removeButton);
};

const ul = document.getElementsByTagName('ul')[0];
const existingLi = ul.children;

for(let i = 0; i < existingLi.length; i++){
	attachButtons(existingLi[i]);
}

const input = document.getElementsByTagName('input')[0];
const addButton = document.getElementsByClassName('add')[0];

addButton.addEventListener('click', () => {
	let liItem = document.createElement('li');
	let pItem = document.createElement('p');
	pItem.textContent = input.value;
	liItem.appendChild(pItem);
	attachButtons(liItem);
	ul.appendChild(liItem);
	input.value = '';
});

ul.addEventListener('click', (event) => {
	let liItem = event.target.parentNode;
	if(event.target.className == 'remove'){
		ul.removeChild(liItem);
	}
	if(event.target.className == 'up'){
		let prevLi = liItem.previousElementSibling;
		if(prevLi){
			ul.insertBefore(liItem, prevLi);
		}
	}
	if(event.target.className == 'down'){
		let nextLi = liItem.nextElementSibling;
		if(nextLi){
			ul.insertBefore(nextLi, liItem);
		} 
	}
});

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 {
	background: #f1f1f1;
	font-family: arial, sans-serif;
}

.container {
	width: 600px;
	height: auto;
	margin: 0 auto 5px;
	padding: 40px 20px;
	border-radius: 5px;
	background: white;

	text-align: center;
}

h1 {
	font-size: 24px;
	color: #000;
	margin: 0 0 10px;
	padding: 0;
}

p {
	font-size: 12px;
	color: #666;
	margin: 0 0 20px;
	padding: 0;
}

input {
	min-width: 180px; 
	height: 30px;
	border: 1px solid #999;
	border-radius: 3px 0 0 3px;
	margin: 0;
	padding: 0 10px;
}

.add {
	height: 32px;
	background: #f1f1f1	;
	border: 1px solid #999;
	border-radius: 0 3px 3px 0;
	color: #333;
	margin: 0 0 0 -5px;
	padding: 0 10px;
}

ul {
	list-style: none;
	text-align: left;
	margin: 40px 0 0;

	font-size: 14px;
	color: #666;
}

li {
	height: auto;
	border-bottom: 1px solid #ccc; 
	margin: 10px 0 0;
	padding: 5px 0;
}

li:after {
	content: "."; 
   	visibility: hidden; 
   	display: block; 
   	height: 0; 
   	clear: both;
}

li p {
	margin: 10px 30px 0 0;
	padding: 0;
	background: white;
	float: left;
}

.up, .down {
	background: white;
	border: 1px solid #999;
	border-radius: 2px;
	color: #999;
	margin: 0;
	padding: 5px 10px;
}

.remove {
	background: white;
	border: 1px solid red;
	border-radius: 2px;
	color: red;
	margin: 0;
	padding: 5px 10px;
}

<!doctype html>
<html>
	<head>
		<link rel="stylesheet" href="style.css">
		<title>Traversing</title>
	</head>
	<body>
		<div class="container">
			<h1>List of Cars</h1>
			<p>A list of cars I love</p>
			<div>
				<input type="text">
				<button class="add">Add Car</button>
			</div>
			<ul>
				<li>
					<p>BMW M5</p>
				</li>
				<li>
					<p>Porche 911 Turbo</p>
				</li>
				<li>
					<p>Mercedez A250 AMG</p>
				</li>
			</ul>
		</div>
		<script src="app.js"></script>
	</body>
</html>

Answer 1

你只能用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

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

1 个答案: