Teezii Teezii - 2 months ago 7
jQuery Question

Clone selects and keep on cloning or deleting a cloned select

I am having problems with cloning selects and deleting them.

What do I want:


  1. When changing a select, I want to clone the select so there's a new select.

  2. Changing a cloned select will add a new select too.

  3. Selects can be removed

  4. In total there can be max 5 selects but at least 1 select

  5. Update labels with increasing numbers. If one in the middle will be removed, all selects get new label numbers.



I made a JSFiddle

What goes wrong:


  • After cloning you can also delete selects. It can be any select, but there must always 1 select that can't be removed. Removing clones must update the numbers as well.



Here's my code:

$(document).ready(function() {
var selectsCount = 1;
$('.box label').text('Selector ' + (selectsCount++));
$('.box select').on('change', function() {
if (selectsCount < 5) {
var cloned = $('.box').last().clone(true).insertAfter($(this).parents('.box:last'));
cloned;
cloned.find("label").text('test Selector ' + (selectsCount++));
}
});

$(".cancelSelect").on('click', function() {
var parentBox = $(this).parents('.box');
parentBox.find('select').prop('selectedIndex', 0);
parentBox.remove();
});
});


See my JSFiddle

Answer

Pass true as argument in jQuery.clone(true)

.clone( [withDataAndEvents ] ) A Boolean indicating whether event handlers should be copied along with the elements.

Also --selectsCount; if you remove select input.

$(document).ready(function() {
  function updateLabel() {
    $('.selectBox label').each(function(index) {
      this.textContent = 'test Selector ' + (index + 1);
    });
  }
  var selectsCount = 1;
  $('.box label').text('Selector ' + (selectsCount++));
  $('.box select').on('change', function() {
    if (selectsCount < 5) {
      var cloned = $('.box').last().clone(true).insertAfter($(this).parents('.box:last'));
      cloned.find("label").text('test Selector ' + (selectsCount++));
      updateLabel();
    }
  });

  $(".cancelSelect").on('click', function() {
    if ($('.selectBox').length > 1) {
      var parentBox = $(this).parents('.box');
      parentBox.find('select').prop('selectedIndex', 0);
      parentBox.remove();
      --selectsCount;
      updateLabel();
    } else {
      alert('Can not delete all');
    }
  });
});
.box {
  overflow: hidden;
  margin-bottom: 10px;
}
label,
select {
  display: block;
  margin-bottom: 3px;
}
.selectBox {
  float: left;
  display: inline-block;
  margin-right: 10px;
}
.cancelSelect {
  float: left;
  display: inline-block;
  color: red;
  font-weight: 700;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="selectorClones">
  <div class="box">
    <div class="selectBox">
      <label></label>
      <select class="select1" name="select1">
        <option value="first">First choice</option>
        <option value="second">Second choice</option>
        <option value="third">Third choice</option>
      </select>
    </div>
    <div class='cancelSelect'>
      X
    </div>
  </div>
</div>

Comments