Ненужное клонирование div при использовании флажка

Question

Я пытаюсь клонировать div, содержащий конкретные данные пользователя, когда я проверяю флажок и нажимаю OK.Это нормально, когда я выбираю несколько пользователей.Однако, когда я добавляю больше пользователей, в то время как предыдущие флажки установлены, я вижу больше кнопок, которые клонируются, но div не клонируются.Вы можете подумать, что это потому, что я добавил $div.remove();.Но когда я удаляю его, я вижу, что div клонирован с правой стороны, но значения в порядке.Последний div должен быть удален, но у меня проблемы.

$(document).ready(function(){
    $('#delivery-assignment-ok').click(function(){
      var totalamount = 0;
      countCheck = $("input[name='check']:checked").length;
    $.each($("input[name='check']:checked"), function(){            
                // alert(this.id);
                
          var data=this.id;
          // alert(data);
          var id=data.split(" ");
          // alert(id[0]);
          var $div = $('div[id^="deliverydata"]:last');
          
            var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
            
              // alert(num);
          if (this.value == "False") {

              this.value = "True";
            var $clone = $div.clone().prop('id', 'deliverydata'+num );
            $clone.find('#delivery_orderId').prop('name','delivery_orderId'+num);
            $clone.find('#delivery_orderId').val("").end();
            $clone.find('#delivery_order_city').prop('name','delivery_order_city'+num);
            $clone.find('#delivery_order_city').val("").end();
            $clone.find('#delivery_order_address').prop('name','delivery_order_address'+num);
            $clone.find('#delivery_order_address').val("").end();
            $div.find("#delivery_orderId").val(id[0]);
            $div.find("#delivery_order_city").val(id[1]);
            $div.find("#delivery_order_address").val(id[2]);
            $div.after($clone).append('<button class="btn btn-primary">Delete</button>');
         
            $div.children().next().css({
              'float':'right',
                  'position': 'relative',
                  'top': '30px'
              }) ;
               $div.children('.row.form-group').css({
              'width':'91%',
              'float':'left'
            });
          
        }
         
        });
      if (countCheck != 0) {
        var $div = $('div[id^="deliverydata"]:last');
        $div.remove();

      }

    });
  });

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<div class=" list-group items">
   
    <table class="table table-striped table-search" id="myTable">
      <thead>
        <th><input type="checkbox" name="check"></th>
        <th>Order ID</th>
        <th>City</th>
        <th>Receiver Address</th>
        <th>Amount</th>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="check" data-filter-item data-filter-name="1234 Kathmandu Koteshwor 3000" id="1234 Kathmandu Koteshwor 3000" value="False"></td>
          <td>1234</td>
          <td>Kathmandu</td>
          <td>Koteshwor</td>
          <td>Rs. 3000</td>
        </tr>
         <tr>
          <td><input type="checkbox" name="check" data-filter-item data-filter-name="123 Kathmandu Koteshwor 3000" id="123 Kathmandu Koteshwor 3000" value="False"></td>
          <td>123</td>
          <td>Kathmandu</td>
          <td>Koteshwor</td>
          <td>Rs. 3000</td>
        </tr>
         <tr>
          <td><input type="checkbox" name="check" data-filter-item data-filter-name="12 Kathmandu Koteshwor 3000" id="12 Kathmandu Koteshwor 3000" value="False"></td>
          <td>12</td>
          <td>Kathmandu</td>
          <td>Koteshwor</td>
          <td>Rs. 3000</td>
        </tr>
         <tr>
          <td><input type="checkbox" name="check" data-filter-item data-filter-name="14 Kathmandu Koteshwor 3000" id="14 Kathmandu Koteshwor 3000" value="False"></td>
          <td>14</td>
          <td>Kathmandu</td>
          <td>Koteshwor</td>
          <td>Rs. 3000</td>
        </tr>
         <tr>
          <td><input type="checkbox" name="check" data-filter-item data-filter-name="123456 Kathmandu Koteshwor 3000" id="123456 Kathmandu Koteshwor 3000" value="False"></td>
          <td>123456</td>
          <td>Kathmandu</td>
          <td>Koteshwor</td>
          <td>Rs. 3000</td>
        </tr>
        <tr>
          <td><input type="checkbox" name="check" data-filter-item data-filter-name="1234567 Kathmandu Koteshwor 3000" id="1234567 Kathmandu Koteshwor 3000" value="False"></td>
          <td>1234567</td>
          <td>Kathmandu</td>
          <td>Koteshwor</td>
          <td>Rs. 3000</td>
        </tr>

      </tbody>
    </table>
  </div>
          <input type="button" id="delivery-assignment-ok" name="delivery-assignment-ok" class="btn-primary ok" value="Assign Task">
</div>
</div>
<div class="row">
<div class="col-md-12">
  <div class="heading">
                    <h3>Other Details</h3>
                
                </div>
                       
                       
                            <div id="products">
                          <div id="deliverydata1">
                           <div class="row form-group">
                              <div class="col col-md-4">
                                 <label>Order ID</label>
                                 <input type="text" name="delivery_orderId1" class="form-control" id="delivery_orderId">
                              </div>
                              <div class="col col-md-4">
                                 <label>City</label>
                                 <input type="text" name="delivery_order_location1" class="form-control" id="delivery_order_city">
                              </div>
                                 <div class="col col-md-4">
                                 <label>Receiver Address</label>
                                 <input type="text" name="delivery_order_location1" class="form-control" id="delivery_order_address">
                              </div>
                            </div>

                            </div>
                                        
                          </div>
                                  

                        </form>
                     </div>
                  </div>
                </div>
               </div>
            </div>
         </div>

codenippet прилагается ниже

Answer 1

Вы можете сделать это намного проще, если не используете идентификаторы в записях, которые должны дублироваться.По моему мнению, генерировать динамические идентификаторы плохо, потому что их трудно использовать в качестве идентификатора.Для ввода вы можете использовать массив имен, добавив к имени [].В форме данные будут отправлены в виде массива.

Добавлено делегирование событий для кнопок удаления, чтобы они работали для всех записей, вы можете назначить функцию фиктивному объекту и также использовать clone(true), если выпредпочитаю.

Я создал скрытый фиктивный ряд, который будет клонирован и заполнен в зависимости от выбранных рядов.Атрибут данных используется для сопоставления их со строками таблицы, поэтому данные не будут удалены при добавлении строк.

Как вы можете видеть, это также уменьшает количество кода, необходимого.

$(document).ready(function() {
  //Make delete buttons work with event delegation
  $('#products').on('click', '.btn-delete', function() {
    $(this).parents('.deliverydata').remove();
  });

  //When assigning tasks
  $('#delivery-assignment-ok').click(function() {
    //Loop over the tr elements
    $.each($("#myTable tr"), function() {
      $tableRow = $(this);
      $checkbox = $tableRow.find('.rowSelect');
      
      var checkboxId = $checkbox.attr('id');
      
      //If row is checked and not added yet then add it
      if ($checkbox.is(':checked')) {
        if ($('#products div[data-checkboxid="' + checkboxId + '"]').length === 0) {
          var $clone = $('#productrow_dummy .deliverydata').clone();
          //Set corresponding row checkbox id as a data attribute
          //For some reason jQuery.fn.data() doesn't seem to work on cloned objects, attr() works fine.)
          $clone.attr('data-checkboxid', checkboxId);
          //Set input values
          $clone.find('.delivery_orderId').val($tableRow.find('.orderId').text());
          $clone.find('.delivery_order_city').val($tableRow.find('.deliveryOrdeCity').text());
          $clone.find('.delivery_order_address').val($tableRow.find('.deliveryOrderAddress').text());
          //Append clone
          $clone.appendTo('#products');
        }
      }
      //Else remove when a corresponding element is found.
      else {
        $('#products div[data-checkboxid="' + checkboxId + '"]').remove();
      }
    });
  });
});

#productrow_dummy {
  display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<div class=" list-group items">

  <table class="table table-striped table-search" id="myTable">
    <thead>
      <th><input type="checkbox" name="check"></th>
      <th>Order ID</th>
      <th>City</th>
      <th>Receiver Address</th>
      <th>Amount</th>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="1234 Kathmandu Koteshwor 3000" id="1234 Kathmandu Koteshwor 3000"></td>
        <td class="orderId">1234</td>
        <td class="deliveryOrdeCity">Kathmandu</td>
        <td class="deliveryOrderAddress">Koteshwor</td>
        <td>Rs. 3000</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="123 Kathmandu Koteshwor 3000" id="123 Kathmandu Koteshwor 3000"></td>
        <td class="orderId">123</td>
        <td class="deliveryOrdeCity">Kathmandu</td>
        <td class="deliveryOrderAddress">Koteshwor</td>
        <td>Rs. 3000</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="12 Kathmandu Koteshwor 3000" id="12 Kathmandu Koteshwor 3000"></td>
        <td class="orderId">12</td>
        <td class="deliveryOrdeCity">Kathmandu</td>
        <td class="deliveryOrderAddress">Koteshwor</td>
        <td>Rs. 3000</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="14 Kathmandu Koteshwor 3000" id="14 Kathmandu Koteshwor 3000"></td>
        <td class="orderId">14</td>
        <td class="deliveryOrdeCity">Kathmandu</td>
        <td class="deliveryOrderAddress">Koteshwor</td>
        <td>Rs. 3000</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="123456 Kathmandu Koteshwor 3000" id="123456 Kathmandu Koteshwor 3000"></td>
        <td class="orderId">123456</td>
        <td class="deliveryOrdeCity">Kathmandu</td>
        <td class="deliveryOrderAddress">Koteshwor</td>
        <td>Rs. 3000</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="1234567 Kathmandu Koteshwor 3000" id="1234567 Kathmandu Koteshwor 3000"></td>
        <td class="orderId">1234567</td>
        <td class="deliveryOrdeCity">Kathmandu</td>
        <td class="deliveryOrderAddress">Koteshwor</td>
        <td>Rs. 3000</td>
      </tr>
    </tbody>
  </table>
</div>
<input type="button" id="delivery-assignment-ok" name="delivery-assignment-ok" class="btn-primary ok" value="Assign Task">

<div class="row">
  <div class="col-md-12">
    <div class="heading">
      <h3>Other Details</h3>
    </div>
    <div id="products">

    </div>
    <div id="productrow_dummy">
      <div class="deliverydata">
        <div class="row form-group">
          <div class="col col-md-4">
            <label>Order ID</label>
            <input type="text" name="delivery_orderId[]" class="form-cont## Heading ##rol delivery_orderId">
          </div>
          <div class="col col-md-4">
            <label>City</label>
            <input type="text" name="delivery_order_location[]" class="form-control delivery_order_city">
          </div>
          <div class="col col-md-4">
            <label>Receiver Address</label>
            <input type="text" name="delivery_order_location[]" class="form-control delivery_order_address">
          </div>
          <button class="btn btn-delete">Delete</button>
        </div>
      </div>
    </div>
  </div>

Answer 2

Этот код требует серьезной очистки.Это действительно плохой дизайн, вы не можете удалить последний элемент в #products, потому что следующий элемент будет зависеть от него, но если вы просто скроете его, он, похоже, сделает то, что вам нужно.Попробуйте заменить

if (countCheck != 0) {
    var $div = $('div[id^="deliverydata"]:last');
    $div.remove();
}

на

if (countCheck != 0) {
    $('div[id^="deliverydata"]').show();
    $('div[id^="deliverydata"]:last').hide();
}