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

예제

 

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

 

결과보기

왕계란 님 https://sir.kr/qa/325964