Browser Demo 3
'; // add elements that.liParentUl.insertAdjacentHTML("beforeend", li); that.sectionParentDiv.insertAdjacentHTML("beforeend", section); // There are two bugs here // After clicking add, the newly added label has no switching effect // Because the li and section elements are obtained first, there are no new elements in the elements obtained after adding, so there is no effect // The solution is to update the acquisition of the element and bind the event-write a method to update the element that.init(); } // delete node function removeTab(e) { // this points to the x number // First remove the switching function when clicking, you only need to delete the label and the tab page does not need to switch effects e.stopPropagation(); // Prevent the event from bubbling to prevent the occurrence of the span’s parent element li click event // Get the index of the current parent element li of x, delete the corresponding li and section var index = this.parentNode.index; console.log(index); that.tabLis[index].remove(); that.tabSections[index].remove(); that.init(); // Because the delete operation is implemented, we need to reinitialize the binding event // There is a bug here, // First: When we delete the selected label, there is no selected label // Second: The selected label is the first item, and the first item is to be deleted at the same time. There is no selected label at this time // Third: When deleting unselected tags, the selected tags remain unchanged // Solution 3: When selected, keep unchanged and return empty if (document.querySelector(".liactive")) return; // Solution 2: The item after the first item is selected if (index == 0) { that.tabLis[0].click(); } // Solution 1: The effect we want here is that when the selected li is deleted, the previous item of the deleted li is selected index--; // Logic short-circuit application, execute click() event when the previous label exists, manually call li click event that.tabLis[index] && that.tabLis[index].click(); } // modify function exidTabContent() { // this points to the first span tag in li var str = this.innerHTML; // console.log(str); this.innerHTML = ''; var input = this.children[0]; input.value = str; input.select(); // Do not select form text // When the focus is lost, change the content and the form disappears input.addEventListener("blur", function () { this.parentNode.innerHTML = this.value; }) // Press enter to change the content input.addEventListener("keyup", function (e) { if (e.keyCode === 13) { // this.parentNode.innerHTML = this.value; this.blur(); } }) } } var tab = new Tab("#tab"); }