html列表使用和js添加和删除[重复]

Question

我正在尝试使用 html 输入框和 js 制作一个简单的列表。该列表在单击“添加技能”时创建，并在单击“删除”时被删除。但是当我尝试在删除后添加一些技能时，最后删除的项目也回来了。

			var skillList="";
			var i = 0;
			function addSkill(){
				var skills= document.getElementById("addSkill").value;
				if(skills != ""){
					skillList += "<li><span name='skillItem' id='skillItem"+ i +"'>" + skills + "</span> " +
					"<a onclick='removeSkill()'>remove</a></li>";
					i++;
					document.getElementById("skill").innerHTML = skillList;
					document.getElementById("addSkill").value="";				
				}
			}
			
			function removeSkill(){
				skillList="";
				var items = document.querySelectorAll("#skill li"),index,tab = [];
				for(var j = 0; j < items.length; j++){
					tab.push(items[j].innerHTML);
				}
				for(var j = 0; j < items.length; j++){
					items[j].onclick = function(){
					   
						index = tab.indexOf(this.innerHTML);
						items[index].parentNode.removeChild(items[index]);
						tab.splice(j,1);
					};
				}
				console.log(tab);
				for(var j=0; j<tab.length;j++){
					skillList += "<li>" + tab[j] + "</li>";
				}
			}

<td><label>skills:</label></td>
									<td>
										<ul id="skill"></ul>
										<input type="text" name="skill" id="addSkill"/>
										<a onclick="addSkill();" value="">add skill</a>
									</td>

Answer 1

删除这段代码

                for(var j=0; j<tab.length;j++){
                skillList += "<li>" + tab[j] + "</li>";
            }

你又添加了... 现在工作...

var skillList="";
			var i = 0;
			function addSkill(){
				var skills= document.getElementById("addSkill").value;
				if(skills != ""){
					skillList += "<li><span name='skillItem' id='skillItem"+ i +"'>" + skills + "</span> " +
					"<a onclick='removeSkill()'>remove</a></li>";
					i++;
					document.getElementById("skill").innerHTML = skillList;
					document.getElementById("addSkill").value="";				
				}
			}
			
			function removeSkill(){
				skillList="";
				var items = document.querySelectorAll("#skill li"),index,tab = [];
				for(var j = 0; j < items.length; j++){
					tab.push(items[j].innerHTML);
				}
				for(var j = 0; j < items.length; j++){
					items[j].onclick = function(){
					   
						index = tab.indexOf(this.innerHTML);
						items[index].parentNode.removeChild(items[index]);
						tab.pop(j,1);
					};
				}
				

			}

<td><label>skills:</label></td>
									<td>
										<ul id="skill"></ul>
										<input type="text" name="skill" id="addSkill"/>
										<a onclick="addSkill();" value="">add skill</a>
									</td>

Answer 2

您在 removeSkill 函数中的循环和索引中迷失了方向，这比您正在做的事情要容易得多 - 一行代码。 不需要循环和数组。

您还有许多其他古老的编码风格，应该避免。

• 你不需要使用超链接只是因为你想给 有人可以点击。所有可见元素都支持click 事件。仅在实际导航时使用超链接 某处。
• 您不能在没有表格的情况下使用表格单元格。
• 不要使用内联 HTML 事件属性 (onclick)。分开你的所有 来自您的 HTML 的 JavaScript 并使用 .addEventListener()。
• 不要通过将字符串连接在一起来创建新的 HTML。它变成了一个 噩梦般的快，需要你使用.innerHTML，它有 性能和安全影响。相反，创建新的 DOM 对象，根据需要配置它们的属性，然后附加它们 到文档中。

请参阅下面的内联 cmets：

// Get all the element references you'll need just once:
var skillList = document.querySelector("#skillList");
var newSkill = document.querySelector("#newSkill");
var btnAddSkill = document.querySelector("input[type='button'");

// Do all of your event binding in JavaScript, not with inline HTML event attributes
btnAddSkill.addEventListener("click", addSkill);

function addSkill(){
 if(newSkill.value !== ""){
   // Don't build new HTML by concatenating strings. Create elements and configure them as objects
   var li = document.createElement("li");
   li.textContent = newSkill.value;
   
   // Only use hyperlinks for navigation, not to have something to click on. Any element can be clicked
   var span = document.createElement("span");
   span.classList.add("remove");
   span.textContent = "remove skill";
   span.addEventListener("click", removeSkill);  
   li.appendChild(span);  // Add the span to the bullet
   skillList.appendChild(li); // Add the bullet to the list
   newSkill.value = "";	
 }
}
			
function removeSkill(){
  // Just remove the closest <li> ancestor to the <span> that got clicked
  skillList.removeChild(this.closest("li"));
}

.remove { display:inline-block; margin-left:10px; padding:2px 4px; background:rgba(200,0,225,.7); color:#ff0; cursor:pointer; }

li {margin:8px 0; border-bottom:1px dashed #e0e0e0; }

<h1>Skills:</h1>
<input type="text" name="skill" id="newSkill">
<input type="button" value="add skill">

<ul id="skillList"></ul>