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 对象，根据需要配置其属性，然后附加它们进入文档。

请参阅内嵌下面的评论：

// 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>

html列表使用和js添加和删除

2 个答案: