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

标签： javascripthtml

Answer 1

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

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

• 你不需要仅仅因为你想给某人一些东西来点击就使用超链接。所有可见元素都支持一个click 事件。只有在您实际导航到某个地方时才使用超链接。
• 没有表格就不能使用表格单元格。
• 不要使用内联 HTML 事件属性 ( onclick)。将所有 JavaScript 与 HTML 分开，并使用 .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>