I am trying to add values with the help of jquery But last value + in code again and again The last value should be cleared when select new value from dropdown Answer I think you mean this newContent += $("#addedchild1"). is not doing what you think it is There is no content declared You do not need to remove

how to Remove last selected value

I am trying to add values with the help of jquery But last value + in code again and again

The last value should be cleared when select new value from dropdown

var lastSelected;
$(document).ready(function() {
  $("#selectchild1").on('change', function() {
    $("div").remove("select");
    var childvalue = this.value;
    alert(childvalue);


    var count = $(this).val();
    newContent = "";
    name = $(this).attr("name");
    var j = 1;
    var k = 0;
    for (var i = 0; i < count; i++) {
      newContent += $("#addedchild1").append("<div class='col-md-2 col-lg-2 text-center'><div class='form-group'>Child-" + j + " Age <select name='RoomTypes[" + k + "][]'><option value='0'>Age</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><select></div></div>");
      j++;
    }

    content.html(newContent);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectchild1" class="form-control">
  <option value="0">00</option>
  <option value="1">01</option>
  <option value="2">02</option>
  <option value="3">03</option>
  <option value="4">04</option>
  <option value="5">05</option>
  <option value="6">06</option>
</select>
<div class="col-xs-3 col-sm-3 col-md-8 text-right">
  <div id="addedchild1"></div>
</div>

Answer

I think you mean this

newContent += $("#addedchild1"). is not doing what you think it is
There is no content declared
You do not need to remove anything if you use .html() it replaces the HTML

I think you do not want addedChild1 but all the added children in the div I gave ID=”wrapper” – if you want to nest in a addedChild, just change #wrapper to #addedChild1

$(function() {
  $("#selectchild1").on('change', function() {
    var count = +$(this).val();
    name = $(this).attr("name");
    const newContent = Array.from(Array(count+1).keys()) // cleate an array from 0 to count+1
    .slice(1) // get rid of the `0` to use ${i} from `1` 
    .map(i => (`<div class='col-md-2 col-lg-2 text-center'><div class='form-group'>Child-${i} Age <select name='age'><option value='0'>Age</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><select></div></div>`))
    $("#wrapper").html(newContent.join("")); // add the array to the wrapper after joining it
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectchild1" class="form-control">
  <option value="0">00</option>
  <option value="1">01</option>
  <option value="2">02</option>
  <option value="3">03</option>
  <option value="4">04</option>
  <option value="5">05</option>
  <option value="6">06</option>
</select>
<div id="wrapper" class="col-xs-3 col-sm-3 col-md-8 text-right">

</div>

Advertisement

Answer