原生JS在指定div制作一个文件夹管理器，实现新增，删除文件夹等功能（上篇）

好的，让我们接着上篇文章继续完成这个文件夹管理器的功能。

首先，我们需要为文件夹添加一个删除按钮。我们可以在每个文件夹的右侧添加一个“X”按钮，当用户点击时，该文件夹将被删除。为此，我们可以使用一个新的函数“deleteFolder”，该函数将获取要删除的文件夹的ID，并使用“removeChild”方法从DOM中删除该元素。

接下来，我们需要为文件夹添加一个新建文件夹的功能。我们可以添加一个“Add Folder”按钮，当用户点击该按钮时，弹出一个输入框，要求用户输入新文件夹的名称。然后，我们可以使用“createElement”方法创建一个新的文件夹元素，并将其添加到我们的文件夹列表中。

下面是完整的代码：

// 获取文件夹列表元素
var folderList = document.getElementById("folderList");

// 删除指定的文件夹
function deleteFolder(id) {
  var folder = document.getElementById(id);
  folderList.removeChild(folder);
}

// 添加新的文件夹
function addFolder() {
  // 弹出输入框，要求用户输入新的文件夹名称
  var folderName = prompt("Enter folder name:");

  // 创建新的文件夹元素
  var folder = document.createElement("div");
  folder.setAttribute("id", "folder" + (folderList.children.length + 1));
  folder.classList.add("folder");

  // 添加文件夹名称和删除按钮
  folder.innerHTML = folderName + " <span class='delete' onclick='deleteFolder(\"" + folder.getAttribute("id") + "\")'>X</span>";

  // 将新的文件夹元素添加到文件夹列表中
  folderList.appendChild(folder);
}

在上面的代码中，我们使用“setAttribute”方法为新文件夹元素设置ID属性，并使用“classList”属性添加“folder”类。我们还向文件夹元素添加了文件夹名称和删除按钮。删除按钮使用“onclick”事件处理程序调用“deleteFolder”函数，并传递要删除的文件夹的ID。

现在，我们的文件夹管理器就可以正常使用了。您可以尝试单击每个文件夹的删除按钮以删除该文件夹，或单击“Add Folder”按钮以添加新的文件夹。

希望这篇文章能够帮助你完成自己的文件夹管理器。如果您有任何问题或反馈，请在评论中留言。