动态html元素问题

Question

当选择其中一个菜单并选择选项标签中的选项时，可以将应用按钮设置为下面面板中的动态html元素。当用户点击取消按钮时，该动态html元素将被删除。

至于一个问题，当用户选择一个菜单时，动态html元素将被冗余地放置在面板中。

例如， 应用菜单2＆gt;在menu2的面板中创建动态html元素＆gt;取消菜单2＆gt;应用菜单其他菜单（3或1）＆gt;在菜单2的前一个面板和菜单的当前面板中冗余地创建动态html元素。

单击取消按钮时，如何完全删除动态html元素？

＆＃13;

＆＃13;

$(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("신청 완료 되었습니다")	
    })

  })


  $(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"});						
    }
  });

  //메뉴 하$(단 클릭시 섹션 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();
}

＆＃13;

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

＆＃13;

<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">
						<option value="menu" selected="selected">choose one</option>
						<option value="a">a</option>
						<option value="b">b</option>
						<option value="c">c</option>
						<option value="d">d</option>
					</select>



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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用JQuery的空命令，它从父元素中删除所有子元素

$("#parent").empty()