原生js删除html,比较完整的原生js选项卡，有添加和删除功能

css部分

* {

margin: 0;

padding: 0;

list-style: none;

}

body {

text-align: center;

}

.tabsbox {

width: 900px;

margin: 50px auto;

}

.firstnav {

border: #ddd 1px solid;

height: 50px;

width: 100%;

overflow: hidden;

position: relative;

line-height: 50px;

}

.firstnav ul {

position: absolute;

left: 0;

top: 0px;

}

.firstnav li {

border-right: #ddd 1px solid;

float: left;

cursor: pointer;

box-sizing: border-box;

padding: 0 20px;

position: relative;

height: 50px;

}

.firstnav li input {

width: 110px;

height: 30px;

}

.firstnav li.liactive {

background-color: #f0f0f0;

}

.close {

cursor: pointer;

position: absolute;

right: 0;

top: 5px;

display: inline-block;

width: 10px;

height: 2px;

background: #f00;

line-height: 0;

font-size: 0;

vertical-align: middle;

transform: rotate(45deg);

}

.close:after {

content: '/';

display: block;

width: 10px;

height: 2px;

background: #f00;

transform: rotate(-90deg);

}

.tabadd {

position: absolute;

right: 0;

top: 0;

width: 40px;

background-color: #999;

color: #fff;

}

.tabscon {

border: #ddd 1px solid;

border-top: 0;

}

.tabscon section {

height: 500px;

display: none;

padding: 25px;

}

.tabscon section input {

width: 700px;

height: 400px;

}

.tabscon section.conactive {

display: block

}

HTML部分

• 测试1 删除

• 测试2 删除

• 测试3 删除

+

test1

test2

test3

javascript部分

var that;

class tab {

constructor(id) {

that = this;

this.main = document.querySelector(id);

this.width = this.main.offsetWidth;

this.add = this.main.querySelector('.tabadd');

this.tabscon = this.main.querySelector('.tabscon');

this.ul = this.main.querySelector('ul');

this.init();

}

init() {

this.updateNode();

this.add.onclick = this.addTab;

var ulWidth = 0;

for (var i = 0; i < this.lis.length; i++) {

ulWidth += Math.ceil(this.lis[i].offsetWidth + 1);

this.lis[i].index = i;

this.lis[i].onclick = this.toggleTab;

this.remove[i].onclick = this.removeTab;

this.spans[i].ondblclick = this.editTab;

this.sections[i].ondblclick = this.editTab;

}

this.ul.style.width = ulWidth + 'px';

if (ulWidth > this.width) {

this.ul.style.marginLeft = -(ulWidth - this.width + 40) + "px";

} else {

this.ul.style.marginLeft = 0 + "px";

}

}

updateNode() {

this.lis = this.main.querySelectorAll('li');

this.sections = this.main.querySelectorAll('section');

this.remove = this.main.querySelectorAll(".close");

this.spans = this.main.querySelectorAll('.firstnav li span:first-child');

}

toggleTab() {

that.clearClass();

this.className = 'liactive';

that.sections[this.index].className = 'conactive'

}

clearClass() {

for (var i = 0; i < this.lis.length; i++) {

this.lis[i].className = '';

this.sections[i].className = '';

}

}

addTab() {

that.clearClass();

var random = Math.random();

var li = '

新选项卡 删除';

var section = 'test1' + random + '';

that.ul.insertAdjacentHTML('beforeend', li);

that.tabscon.insertAdjacentHTML('beforeend', section);

that.init();

}

removeTab(e) {

e.stopPropagation();

var index = this.parentNode.index;

that.lis[index].remove();

that.sections[index].remove();

that.init();

if (document.querySelector('.liactive')) return;

index--;

that.lis[index] && that.lis[index].click();

}

editTab() {

//双击禁止选中文字

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

var str = this.innerHTML;

this.innerHTML = ''

var input = this.children[0];

input.value = str;

input.select();

input.onblur = function () {

this.parentNode.innerHTML = this.value;

}

input.onkeyup = function (e) {

if (e.keyCode === 13) {

this.blur();

}

}

}

}

var tabsone = new tab("#tab");