2017-03-09 171 views
0

當選擇其中一個菜單並且選擇標籤中的選項時,應用按鈕可以被放置在面板下面的動態html元素中。當用戶點擊取消按鈕時,該動態html元素將被刪除。動態html元素問題

至於一個問題,當用戶選擇一個菜單時,動態html元素將被重複放置在面板中。

例如, 應用菜單2>在菜單2面板中創建動態html元素>取消菜單2>應用菜單其他菜單(3或1)>在菜單2前面板和當前面板中冗餘創建動態html元素菜單。

我怎麼能夠完全刪除動態html元素,當我點擊取消按鈕?

$(function() { 
 

 

 
    $(".section4 ul li:first-child").addClass("on"); 
 

 
    //section4 ul li on 
 
    $("section.section4 ul li").click(function() { 
 
    $(this).addClass("on"); 
 
    $("section.section4 ul li.on").not(this).removeClass("on"); 
 
    }); 
 

 

 

 
    // panel 
 
    $(".PaNel").hide(); 
 
    $(".PaNel:eq(0)").show(); 
 

 
    //addEventListner 
 
    $(".section4 ul li").click(function() { 
 
    $(".PaNel").hide(); 
 
    $("#tab" + ($(this).index() + 1)).show(); 
 

 

 
    }); 
 

 

 

 
    //메뉴 선택 
 
    $(".section2").find("article").click(function() { 
 
    $(this).addClass("On"); 
 
    $("article.On").not(this).removeClass("On"); 
 
    }); 
 

 

 

 

 

 
    //비활성신청 
 
    $(".btn2").css({ 
 
    "display": "none" 
 
    }); 
 

 
    //상단 메뉴 
 
    $("article").click(function() { 
 
    if ($(this).hasClass("On") && $("#menuSelect option:selected").index() > 0) { 
 
     $(".btn1").css({ 
 
     "background": "red" 
 
     }); 
 
     //$(".btn2").css({"display":"block"}); 
 
    } else { 
 
     $(".btn1").css({ 
 
     "display": "block" 
 
     }); 
 
     $(".btn2").css({ 
 
     "display": "none" 
 
     }); 
 
    } 
 
    }); 
 

 
    // while article is clicked, menuSelect.index() > 0 
 
    $("body").click(function() { 
 
    if ($("article").hasClass("On")) { 
 
     if ($("#menuSelect option:selected").index() > 0) { 
 
     $(".btn1").css({ 
 
      "display": "none" 
 
     }); 
 
     $(".btn2").css({ 
 
      "display": "block" 
 
     }); 
 
     } 
 
    } 
 
    }) 
 

 

 

 
    $(".area_popup").addClass("none") 
 
    $(".end").addClass("none"); 
 

 

 

 

 

 
    $(".section2").children("article").one("click", function() { 
 
    console.log($(this).index()) 
 
    var target = $("#tab" + $(this).index()) 
 

 

 
    $("#Apply").click(function() { 
 
     var menuSelect = document.getElementById("menuSelect"); 
 
     //console.log(menuSelect); 
 
     switch (menuSelect.value) { 
 
     case "a": 
 
     case "b": 
 
     case "c": 
 
     case "d": 
 
      target.find(".Apply_Check").append("<div class='User'>" + menuSelect.value + "</div>"); 
 
      break; 
 
     } 
 

 
     $(".end").removeClass("none"); 
 
     $("#Apply").addClass("none"); 
 

 
     //alert("신청 완료 되었습니다") \t 
 
    }) 
 

 
    }) 
 

 

 
    $(document).on("click", '.end', function() { 
 
    //본인꺼만 
 
    $(".User").remove(); 
 
    $(".end").addClass("none"); 
 
    $("#Apply").removeClass("none"); 
 
    }); 
 

 

 
    $("article").click(function() { 
 
    if (parseInt($(this).find("span").text()) == 0) { 
 
     //$(".button").css({"display":"none"}); 
 
     //$(".btn1,.btn2, .end").css({"display":"none"}) 
 
     //$(".btn4").css({"display":"block"}); 
 

 
     $(".area_popup3").css({ 
 
     "display": "block" 
 
     }); 
 

 
    } else { 
 
     //$(".button").css({"display":"block"}); 
 
     //$(".btn4").css({"display":"none"}); \t \t \t \t \t \t 
 
    } 
 
    }); 
 

 
    //메뉴 하$(단 클릭시 섹션 2 남은 수량이 없는 경우 
 
    $(".section4 ul").children("li").click(function() { 
 
    var article = $('article:eq(' + $(this).index() + ')') 
 

 

 
    if (parseInt(article.find("span").text()) == 0) { 
 
     $(".area_popup3").css({ 
 
     "display": "block" 
 
     }); 
 
    } 
 
    }) 
 

 

 

 
    $("body").click(function(e) { 
 
    if ($("#menuSelect option:selected").index() == 0) { 
 
     $(".btn1").css({ 
 
     "display": "block" 
 
     }); 
 
     $(".btn2").css({ 
 
     "display": "none" 
 
     }); 
 

 

 
    } 
 
    }) 
 

 

 
}); 
 

 
function fn_popup_close(name) { 
 
    //$('body').removeClass('fixed'); 
 
    //body class removeClass 
 
    $('.' + name).hide(); 
 
} 
 

 
function fn_popup_open(name) { 
 
    //$('body').addClass('fixed'); 
 
    $('.' + name).show(); 
 
}
/*//////////////////reset//////////////////////////////////////*/ 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body, 
 
header, 
 
footer, 
 
section, 
 
nav, 
 
article, 
 
figure, 
 
aside, 
 
details, 
 
main { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header, 
 
footer, 
 
section, 
 
nav, 
 
article, 
 
figure, 
 
aside, 
 
details, 
 
main { 
 
    display: block; 
 
} 
 

 
a:link, 
 
a:visited { 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 

 
/*a:hover, a:focus{color:#aaa; text-decoration:none;}*/ 
 

 
body { 
 
    color: #333; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
input[type="button"] { 
 
    cursor: pointer; 
 
} 
 

 
input[type=button], 
 
select { 
 
    border-radius: 0; 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
} 
 

 

 
/*//////////////////reset//////////////////////////////////////*/ 
 

 
#wrap { 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 

 
/*//////////////section1/////////////////////////////////////*/ 
 

 
section.section1 { 
 
    width: 100%; 
 
    /*background:#F87141;*/ 
 
} 
 

 
section.section1 .screen_info { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
section.section1 .screen_info ul { 
 
    width: 300%; 
 
    overflow: hidden; 
 
} 
 

 
section.section1 .screen_info ul li { 
 
    width: 31.63%; 
 
    float: left; 
 
    padding: 10px 1% 10px .7%; 
 
} 
 

 

 
/*//////////////section2/////////////////////////////////////*/ 
 

 
section.section2 { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    border-width: 1px 0; 
 
} 
 

 
section.section2 h3 { 
 
    width: 100%; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    border-bottom: 1px solid #ccc; 
 
    text-indent: 2%; 
 
} 
 

 
section.section2 article { 
 
    width: 31.33%; 
 
    padding-left: 2%; 
 
    height: 100px; 
 
    float: left; 
 
} 
 

 
section.section2 article div { 
 
    border-right: 1px solid #ccc; 
 
} 
 

 
.On { 
 
    background: #d4dbdd; 
 
} 
 

 

 
/*section.section2 article:last-child{border-right:none;}*/ 
 

 
section.section2 article h2 { 
 
    width: 100%; 
 
    height: 30px; 
 
    font-size: 14px; 
 
    line-height: 30px; 
 
} 
 

 
section.section2 article p.FoodName { 
 
    width: 100%; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    font-weight: 900; 
 
    font-size: 20px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 

 
section.section2 article p.FoodCnt { 
 
    width: 90%; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    text-align: right; 
 
    font-size: 13px; 
 
} 
 

 

 
/*//////////////section2/////////////////////////////////////*/ 
 

 

 
/*//////////////section3/////////////////////////////////////*/ 
 

 
section.section3 { 
 
    width: 100%; 
 
    padding-top: 30px; 
 
} 
 

 
section.section3 .Select { 
 
    border-top: 1px solid #ccc; 
 
    position: relative; 
 
} 
 

 
.Select { 
 
    display: block; 
 
    content: ""; 
 
    clear: both; 
 
} 
 

 
section.section3 .Select p.Selected { 
 
    height: 40px; 
 
    line-height: 40px; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
section.section3 .Select p { 
 
    font-weight: 900; 
 
    text-indent: 9%; 
 
} 
 

 
section.section3 .Select p.Selected span { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 4px; 
 
} 
 

 
section.section3 .Select p.Selected span img { 
 
    width: 10px; 
 
} 
 

 
.selection { 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 

 
/*.on{background:#ccc;}*/ 
 

 
section.section3 select { 
 
    width: 100%; 
 
    height: 30px; 
 
    background: #ECEFF0; 
 
    border: 1px solid #ccc; 
 
    border-width: 1px 0; 
 
} 
 

 
select#menuSelect::-ms-expand { 
 
    display: none; 
 
} 
 

 

 
/*IE*/ 
 

 
select#menuSelect { 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    /*for chrome*/ 
 
    -moz-appearance: none; 
 
    /*for firefox*/ 
 
    background: url(./images/next_shadow.png) no-repeat right; 
 
    background-position-x: 97%; 
 
    background-size: 14px 24px; 
 
    text-indent: 2%; 
 
} 
 

 
section.section3 p.Avail_time { 
 
    width: 95%; 
 
    text-align: right; 
 
    line-height: 30px; 
 
    height: 30px; 
 
    padding-right: 5%; 
 
} 
 

 
section.section3 p input[type=button] { 
 
    width: 100%; 
 
    border: 1px solid #ccc; 
 
    border-width: 1px 0; 
 
    background: #F87141; 
 
    height: 40px; 
 
    color: #fff; 
 
} 
 

 
section.section3 p.btn1 input[type=button] { 
 
    background: #aaa; 
 
} 
 

 
section.section3 p.end input[type=button] { 
 
    background: #aaa; 
 
} 
 

 
.none { 
 
    display: none; 
 
} 
 

 

 
/*//////////////section3/////////////////////////////////////*/ 
 

 

 
/*//////////////section4/////////////////////////////////////*/ 
 

 
section.section4 { 
 
    padding-top: 30px; 
 
} 
 

 
section.section4 ul { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    border-width: 1px 0; 
 
} 
 

 
section.section4 ul li { 
 
    width: 25%; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    float: left; 
 
    font-weight: 900; 
 
    font-size: 13px; 
 
    text-align: center; 
 
    background: #fff; 
 
} 
 

 
section.section4 ul li a { 
 
    display: block; 
 
    border-right: 1px solid #ccc; 
 
} 
 

 
.on>a { 
 
    background: #aaa; 
 
    color: #fff; 
 
} 
 

 
section.section4 ul li:last-child a { 
 
    border: none; 
 
} 
 

 
section.section4 .memo { 
 
    width: 100%; 
 
} 
 

 
section.section4 .memo input { 
 
    width: 100%; 
 
} 
 

 
section.section4 article.PaNel { 
 
    width: 98%; 
 
    padding-left: 2%; 
 
    height: 400px; 
 
} 
 

 
.Apply_Check { 
 
    width: 100%; 
 
} 
 

 
.Apply_Check p.Count { 
 
    width: 100%; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-weight: 900; 
 
} 
 

 
#tab4 { 
 
    padding: 10px; 
 
} 
 

 
#tab4 p { 
 
    padding-bottom: 20px; 
 
} 
 

 

 
/*//////////////dynamic HTML Element ////////////////////////////////////*/ 
 

 
.User { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #aaa; 
 
} 
 

 

 
/*//////////////dynamic HTML Element ////////////////////////////////////*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<section class="section2"> 
 
    <h3>choose menu</h3> 
 
    <article> 
 
    <div> 
 
     <h2>menu 1.</h2> 
 
    </div> 
 
    </article> 
 
    <article class="scene_two"> 
 
    <div> 
 
     <h2>menu 2.</h2> 
 

 
    </div> 
 
    </article> 
 
    <article class="scene_three"> 
 
    <div> 
 
     <h2>menu 3.</h2> 
 
    </div> 
 
    </article> 
 

 

 
</section> 
 

 
<section class="section3"> 
 
    <select id="menuSelect"> 
 
\t \t \t \t \t \t <option value="menu" selected="selected">choose one</option> 
 
\t \t \t \t \t \t <option value="a">a</option> 
 
\t \t \t \t \t \t <option value="b">b</option> 
 
\t \t \t \t \t \t <option value="c">c</option> 
 
\t \t \t \t \t \t <option value="d">d</option> 
 
\t \t \t \t \t </select> 
 

 

 

 
    <!--<div class="Select"> 
 
\t \t \t \t \t <p class="Selected" id="reasonSelect" onclick="result();">신청사유 선택<span><img src="./images/next_shadow.png" alt="arrow"/></span></p> 
 
\t \t \t \t \t <div class="selection"> 
 
\t \t \t \t \t \t <p>외근/출장</p> 
 
\t \t \t \t \t \t <p>당직</p> 
 
\t \t \t \t \t \t <p>당직</p> 
 
\t \t \t \t \t \t <p>기타</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div>--> 
 

 

 

 
    <p class="btn1 button"><input type="button" value="apply" /></p> 
 
    <p class="btn2 button"><input type="button" value="apply" id="Apply" /></p> 
 
    <p class="end button"><input type="button" value="cancel" onclick="fn_popup_open('area_popup')" /></p> 
 
    <!--<p class="btn4 button"><input type="button" value="신청 마감" onclick="fn_popup_open('area_popup')"/></p>--> 
 
    <!--<select> 
 
\t \t \t \t \t <option>dd</option> 
 
\t \t \t \t \t <option>dd</option> 
 
\t \t \t \t \t <option>dd</option> 
 
\t \t \t \t \t <option>ddd</option> 
 
\t \t \t \t </select>--> 
 

 
</section> 
 

 
</section> 
 
<section class="section4"> 
 
    <ul> 
 
    <li><a href="#none" title="메뉴1신청자">menu1</a></li> 
 
    <li class="scene_two"><a href="#none" title="메뉴2신청자">menu2</a></li> 
 
    <li class="scene_three"><a href="#none" title="메뉴3신청자">menu3</a></li> 
 
    <li><a href="#none" title="주의사항">info</a></li> 
 
    </ul> 
 
    <article class="PaNel" id="tab1"> 
 
    <div class="Apply_Check"> 
 
     <p class="Count">Panel <span id="ppl1">1</span></p> 
 
    </div> 
 
    </article> 
 
    <article class="PaNel" id="tab2"> 
 
    <div class="Apply_Check"> 
 
     <p class="Count">Panel <span id="ppl2">2</span></p> 
 
    </div> 
 
    </article> 
 
    <article class="PaNel" id="tab3"> 
 
    <div class="Apply_Check"> 
 
     <p class="Count">Panel <span id="ppl3">3</span></p> 
 
    </div> 
 
    </article> 
 
    <article class="PaNel" id="tab4"> 
 
    information 
 
    </article> 
 
</section> 
 

 

 

 
</div>

回答

0

你可以使用jQuery的空命令,它會刪除所有子元素從父元素

$("#parent").empty()