j JavaScript

[js] JS - 클릭버튼생성 (= 클릭탭생성), 자식요소개별아이디부여, 클릭요소삭제 (= 클릭요소제거 = 클릭부모요소제거 = 클릭부모요소삭제) ※ overflow속성 (= 오버플로속성)

4,073

예제

<style>

#box {

width:300px;

padding-bottom:2px;

overflow-y:hidden;

overflow-x:auto;

white-space:nowrap;

}

#box .tab_box {

width:100px;

height:30px;

display:inline-block;

overflow:auto;

}

#box .tab_btn {

width : 70px;

height: 30px;

display:inline-block;

}

#box .tab_btn_x {

width : 30px;

height: 30px;

display:inline-block;

}

#create_btn {

width : 100px;

height: 30px;

display:inline-block;

float:left;

}

button {display:block;}

</style>

<p>왕계란 님 감사합니다. ( ^_____ ~ ) ===b</p>

<button class="create_btn" onclick="homzzang()" >클릭</button>

<div id="box"><div>

<script>

var i = 0;

function homzzang(){

var box = document.getElementById("box");

var tabBtn = "";

tabBtn += "<input type='button' id='tab_btn-" + i + "' class='tab_btn' value='왕계란" + i + "' />";

tabBtn += "<input type='button' id='tab_btn-" + i + "-x' class='tab_btn_x' value='X' onclick='removeTab(this)' />";

i++;

var tabBox = document.createElement("div");

tabBox.id = "tab_box";

tabBox.className = "tab_box";

tabBox.innerHTML = tabBtn;

box.appendChild(tabBox);

}

function removeTab(obj) {

obj.parentElement.remove();

}

</script>

결과보기