Remove the appended div when unchecked

Question

I want to remove the appended div's when a checkbox is unchecked, which appear on the top when a checkbox is checked , but could not achieve the functionality. here is the fiddle http://jsfiddle.net/tVYaE/33/

$('input:checkbox').change(
                function () {
                    if ($(this).is(':checked')) {
                        $('<li />').appendTo('#div ul').text($(this).val());
                    }
                    else {

                        if ($('#div ul').has('<li />')) {
                            $('<li />').remove();
                        }
                    }
                });

Answer 1

您可以在下面的代码段中执行此操作。

当然需要进行一些重构。

＆＃13;

＆＃13;

 $(function () {


        $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');
        $("#gender ul li").on("click", function (event) {
            event.stopPropagation();
            $("#activity").append(this.childNodes[0].nodeValue);
            return false;
        });



        $('input:checkbox').change(
            function () {
                if ($(this).is(':checked')) {
                    $('<li />').appendTo('#div ul').text($(this).val());
                }
                else {
                		value = $(this).val();
                    if ($('#div ul').has('li:contains("'+value+'")')) {
                        $('li:contains("'+value+'")').remove();
                    }
                }
            });


        $('#checkbox1').change(function () {
            if (this.checked)
                $('#autoUpdate').fadeIn('slow');
            else
                $('#autoUpdate').fadeOut('slow');

        });

        $(".male").on("click", function () {
            $(".genderSelect").slideUp();

        });
        $(".female").on("click", function () {
            $(".genderSelect").slideUp();

        });
        var clickedone = true;
        $(".select_gend_div").on("click", function () {
            if (clickedone) {
                clickedone = false;
                $(".genderSelect").slideDown();
            }
            else {
                clickedone = true;
                $(".genderSelect").slideUp();
            }



        });
        $(".button").on("click", function () {

            var $button = $(this);
            var oldValue = $button.parent().find("input").val();
            var sum = 0;
            $('.numbers-row input[type="text"]').each(function () {
                sum += Number($(this).val());
            });
            if ($button.text() == "+" && sum < 10) {
                var newVal = parseFloat(oldValue) + 1;
            } else if ($button.text() == "-") {
                // Don't allow decrementing below zero
                if (oldValue > 0) {
                    var newVal = parseFloat(oldValue) - 1;
                } else {
                    newVal = 0;
                }
            } else {
                return false;
            }

            $button.parent().find("input").val(newVal);

        });



        var clicked = true;
        $(".one").on('click', function () {
            if (clicked) {
                clicked = false;
                $(".two").slideDown();
            }
            else {
                clicked = true;
                $(".two").slideUp();
            }
        });


    });

＆＃13;

 #page-wrap{
    margin-left:100px !important;
}
    .clearfix:after {
        content: " "; /* Older browser do not support empty content */
        visibility: hidden;
        display: block;
        height: 0;
    }
    .fa_modify{
        position:absolute;
        top:10px;
        color:rgba(0,0,0,0.24);
        right:5px;
    }
    .container {
   overflow:hidden;
   min-height: 60px;
}
.listofslect{
  padding-left:0;
  position:absolute;
  float:left;
  margin-left:10px;
  top:20px;
  
}
.listofslect li{
  height:inherit !important;
  padding:0 !important;
  font-size:14px;
 margin-right:5px;
  display:inline-block;
}
.container_pos_abs{
  position:absolute;
  top:60px;
  width:100%;
      position: absolute;
    top: 52px;
    background: #fff;
    
    border-radius: 3px;
    margin: 0 auto;
    width: 100%;
}


.genderSelect{
        background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 3px;
    margin: 0 auto;
    position:absolute;
    top:20px;
    width:100%;
}
.select_ensure{
  margin-bottom:10px;
}

.name{
  display:inline-block;
}
.button_submit{
  margin-top:150px;
  margin:0 auto;
  text-align:center;
  display:block;
}
.numbers-row.display_inner {
  float:left;
}
.numbers-row.display_inner input{
  max-width:15px;
  display:inline-block;
  
}
.listofslect li{
  height: 55px;
    position: relative;
    border-radius: 3px;
    -webkit-transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
    transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
    padding: 23px 25px 0px 12px;
    text-align: left;
    border: none;

}
.genderSelect{
      font-size: 10px;
    text-transform: uppercase;
    opacity: 0.7;
    top: 10px;
    min-height:40px;
    left: 12px;
    letter-spacing: 1px;
}
.numbers-row.display_inner{
      float: left;
    position: absolute;
    top: 0;
    right: 0;
}
.positionr{
  position:relative;
}
.select_gend_div{
      font-size: 14px;
    text-transform: uppercase;
    opacity: 0.7;
    top: 10px;
    left: 12px;
    letter-spacing: 1px;
  position:absolute;
  top:5px;
  
}
.two{
  min-width:252px;
  width:100%;
      font-size: 12px;
    text-transform: uppercase;
    margin-top: 2px;
    margin-bottom: 15px;
    text-align: center;
    padding: 0 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border:1px solid black;
    letter-spacing: 1px;
    line-height: 1.4em;
  background-color:white;
}
.select_ensure{
  text-align:left;
  margin: 10px 0;
}

.genderSelect{
  display:none;
}

.genderSelect{

  top:50px;
 
}
.gender-row{
  
  float:left;
   box-shadow:0 2px 4px 0 rgba(0,0,0,0.20), 0 -1px 0 0 rgba(0,0,0,0.03);
  position:relative;
  min-height:50px;
  cursor:pointer; 
  margin-bottom:10px;
}
.male,.female{
    color:black;
      
    font-size: 14px;
    padding: 5px;
    margin-bottom: 5px;
}
.section2row{
  float:left;
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.20), 0 -1px 0 0 rgba(0,0,0,0.03);
  position:relative;
}
.one:hover,.gender-row:hover {
    background-color:rgba(0,0,0,0.24);
}
.one {
  min-width:250px;
min-height:50px;
   float:left;
    z-index: 1;
    cursor:pointer;
        transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
    text-align: left;
    border: none;
    width:100%;
    background: #fff;
    color:#314451;
    font-size:16px;
    letter-spacing:1px;
    color:#314451;
}
.inc{

      float: left;
  cursor:pointer;
    font-size: 24px;
}
.dec{
  float:right;
    cursor:pointer;
    font-size: 24px;
}
.one{
    cursor:pointer;
  padding: 5px 25px 0px 12px;
  float:left;
 
}
#autoUpdate{
 display:none;
}
.select_ensure checkbox{
  float:left;
}
.fa_plusmod{
    position:absolute;
    right:0;
    top:25px;
}
.two {
  display:none;
  float:left;
  background-color:white;
    z-index: -1;
    -webkit-transition: top 1s;

}
.disp_inline{
    display:inline-block;
}
#div{
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page-wrap clearfix" style="display:table;width:100%; margin-left:50px;">

            <form method="post" action="">
         


                <div class="col-md-6 section2row clearfix">
                    <div class="one">Member to be insured</div>
                    <div id="div">
                        <ul class="listofslect"></ul>
                    </div>



                    <div class="container  container_pos_abs">

                        <div class="two">

                            <i class="fa fa-plus fa_plusmod" aria-hidden="true"></i>
                            who do you want to insure<br />
                            <div class="select_ensure">
                                <input type="checkbox" class=customecheckvalue id="checkbox4 " />
                                <div class="name">
                                    you
                                </div>

                            </div>
                            <div class="select_ensure">
                                <input type="checkbox" class=customecheckvalue id="checkbox5" value="wife" /><div class="name">
                                    Wife
                                </div>

                            </div>
                            <div class="select_ensure">
                                <input type="checkbox" id="checkbox6" value="father" />
                                <div class="name">
                                    Father
                                </div>

                            </div>  <div class="select_ensure">
                                <input type="checkbox" id="checkbox7" value="Mother" />

                                <div class="name"> Mother</div>

                            </div>

                            <div class="select_ensure positionr">
                                <input type="checkbox" id="checkbox1" /> <div class="name">Son</div>
                                <div id="autoUpdate" class="autoUpdate">
                                    <div class="numbers-row  display_inner">

                                        <label for="name"></label>
                                        <input type="text" name="Sons" id="french-hens" value="0">
                                    </div>
                                </div>
                                <div class="button_submit">
                                    <input type="submit" value="Submit" id="done">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
             
                 
                   
                
   
                      
               
           
            </form>
        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以循环浏览所有添加的元素，并检查其中的文本是否与当前未经检查的值匹配：

$('input:checkbox').change(
  function() {
    var thisCheckbox = $(this).val();
    if ($(this).is(':checked')) {
      $('<li />').appendTo('#div ul').text($(this).val());
    } else {
      $('.listofslect li').each(function() {
        if ($(this).text() == thisCheckbox) {
          $(this).remove();
        }
      });
    }
  });

请参阅下面的工作代码：

＆＃13;

＆＃13;

$(function() {


    $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');
    $("#gender ul li").on("click", function(event) {
        event.stopPropagation();
        $("#activity").append(this.childNodes[0].nodeValue);
        return false;
    });

    $('input:checkbox').change(
        function() {
            var thisCheckbox = $(this).val();
            if ($(this).is(':checked')) {
                $('<li />').appendTo('#div ul').text($(this).val());
            } else {

                $('.listofslect li').each(function() {
                    if ($(this).text() == thisCheckbox) {
                        $(this).remove();
                    }
                });
            }
        });


    $('#checkbox1').change(function() {
        if (this.checked)
            $('#autoUpdate').fadeIn('slow');
        else
            $('#autoUpdate').fadeOut('slow');

    });

    $(".male").on("click", function() {
        $(".genderSelect").slideUp();

    });
    $(".female").on("click", function() {
        $(".genderSelect").slideUp();

    });
    var clickedone = true;
    $(".select_gend_div").on("click", function() {
        if (clickedone) {
            clickedone = false;
            $(".genderSelect").slideDown();
        } else {
            clickedone = true;
            $(".genderSelect").slideUp();
        }



    });
    $(".button").on("click", function() {

        var $button = $(this);
        var oldValue = $button.parent().find("input").val();
        var sum = 0;
        $('.numbers-row input[type="text"]').each(function() {
            sum += Number($(this).val());
        });
        if ($button.text() == "+" && sum < 10) {
            var newVal = parseFloat(oldValue) + 1;
        } else if ($button.text() == "-") {
            // Don't allow decrementing below zero
            if (oldValue > 0) {
                var newVal = parseFloat(oldValue) - 1;
            } else {
                newVal = 0;
            }
        } else {
            return false;
        }

        $button.parent().find("input").val(newVal);

    });



    var clicked = true;
    $(".one").on('click', function() {
        if (clicked) {
            clicked = false;
            $(".two").slideDown();
        } else {
            clicked = true;
            $(".two").slideUp();
        }
    });


});

＆＃13;

#page-wrap {
  margin-left: 100px !important;
}

.clearfix:after {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
}

.fa_modify {
  position: absolute;
  top: 10px;
  color: rgba(0, 0, 0, 0.24);
  right: 5px;
}

.container {
  overflow: hidden;
  min-height: 60px;
}

.listofslect {
  padding-left: 0;
  position: absolute;
  float: left;
  margin-left: 10px;
  top: 20px;
}

.listofslect li {
  height: inherit !important;
  padding: 0 !important;
  font-size: 14px;
  margin-right: 5px;
  display: inline-block;
}

.container_pos_abs {
  position: absolute;
  top: 60px;
  width: 100%;
  position: absolute;
  top: 52px;
  background: #fff;
  border-radius: 3px;
  margin: 0 auto;
  width: 100%;
}

.genderSelect {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-radius: 3px;
  margin: 0 auto;
  position: absolute;
  top: 20px;
  width: 100%;
}

.select_ensure {
  margin-bottom: 10px;
}

.name {
  display: inline-block;
}

.button_submit {
  margin-top: 150px;
  margin: 0 auto;
  text-align: center;
  display: block;
}

.numbers-row.display_inner {
  float: left;
}

.numbers-row.display_inner input {
  max-width: 15px;
  display: inline-block;
}

.listofslect li {
  height: 55px;
  position: relative;
  border-radius: 3px;
  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 23px 25px 0px 12px;
  text-align: left;
  border: none;
}

.genderSelect {
  font-size: 10px;
  text-transform: uppercase;
  opacity: 0.7;
  top: 10px;
  min-height: 40px;
  left: 12px;
  letter-spacing: 1px;
}

.numbers-row.display_inner {
  float: left;
  position: absolute;
  top: 0;
  right: 0;
}

.positionr {
  position: relative;
}

.select_gend_div {
  font-size: 14px;
  text-transform: uppercase;
  opacity: 0.7;
  top: 10px;
  left: 12px;
  letter-spacing: 1px;
  position: absolute;
  top: 5px;
}

.two {
  min-width: 252px;
  width: 100%;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 2px;
  margin-bottom: 15px;
  text-align: center;
  padding: 0 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border: 1px solid black;
  letter-spacing: 1px;
  line-height: 1.4em;
  background-color: white;
}

.select_ensure {
  text-align: left;
  margin: 10px 0;
}

.genderSelect {
  display: none;
}

.genderSelect {
  top: 50px;
}

.gender-row {
  float: left;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20), 0 -1px 0 0 rgba(0, 0, 0, 0.03);
  position: relative;
  min-height: 50px;
  cursor: pointer;
  margin-bottom: 10px;
}

.male,
.female {
  color: black;
  font-size: 14px;
  padding: 5px;
  margin-bottom: 5px;
}

.section2row {
  float: left;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20), 0 -1px 0 0 rgba(0, 0, 0, 0.03);
  position: relative;
}

.one:hover,
.gender-row:hover {
  background-color: rgba(0, 0, 0, 0.24);
}

.one {
  min-width: 250px;
  min-height: 50px;
  float: left;
  z-index: 1;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-align: left;
  border: none;
  width: 100%;
  background: #fff;
  color: #314451;
  font-size: 16px;
  letter-spacing: 1px;
  color: #314451;
}

.inc {
  float: left;
  cursor: pointer;
  font-size: 24px;
}

.dec {
  float: right;
  cursor: pointer;
  font-size: 24px;
}

.one {
  cursor: pointer;
  padding: 5px 25px 0px 12px;
  float: left;
}

#autoUpdate {
  display: none;
}

.select_ensure checkbox {
  float: left;
}

.fa_plusmod {
  position: absolute;
  right: 0;
  top: 25px;
}

.two {
  display: none;
  float: left;
  background-color: white;
  z-index: -1;
  -webkit-transition: top 1s;
}

.disp_inline {
  display: inline-block;
}

#div {}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js">
	</script>
	<script src="http://labo.tristan-jahier.fr/chosen_order/chosen.order.jquery.min.js">
	</script>
	<title></title>
</head>
<body>
	<div id="page-wrap clearfix" style="display:table;width:100%; margin-left:50px;">
		<form action="" method="post">
			<div class="col-md-6 section2row clearfix">
				<div class="one">
					Member to be insured
				</div>
				<div id="div">
					<ul class="listofslect"></ul>
				</div>
				<div class="container container_pos_abs">
					<div class="two">
						<i aria-hidden="true" class="fa fa-plus fa_plusmod"></i> who do you want to insure<br>
						<div class="select_ensure">
							<input class="customecheckvalue" id="checkbox4" type="checkbox">
							<div class="name">
								you
							</div>
						</div>
						<div class="select_ensure">
							<input class="customecheckvalue" id="checkbox5" type="checkbox" value="wife">
							<div class="name">
								Wife
							</div>
						</div>
						<div class="select_ensure">
							<input id="checkbox6" type="checkbox" value="father">
							<div class="name">
								Father
							</div>
						</div>
						<div class="select_ensure">
							<input id="checkbox7" type="checkbox" value="Mother">
							<div class="name">
								Mother
							</div>
						</div>
						<div class="select_ensure positionr">
							<input id="checkbox1" type="checkbox">
							<div class="name">
								Son
							</div>
							<div class="autoUpdate" id="autoUpdate">
								<div class="numbers-row display_inner">
									<label for="name"></label> <input id="french-hens" name="Sons" type="text" value="0">
								</div>
							</div>
							<div class="button_submit">
								<input id="done" type="submit" value="Submit">
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用此代码。删除删除过程中的while True:，<。

/>