Блог

Главная - Вопросы по программированию - первый по типу и n-й по типу (1) не работают с динамическим div

первый по типу и n-й по типу (1) не работают с динамическим div

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня проблема с первым типом и n-м типом (1), чтобы скрыть первый элемент класса.

В моем скрипте пользователь может добавить вводимый текст, и у него будет выбор удалить эти вводимые данные. первый элемент (который является первым элементом) не будет скрыт, поэтому без ссылки delate .

Проблема в том, что при добавлении первого типа или n-го типа (1) все ссылки удаления скрыты. Для скрипта каждый добавленный элемент div является первым, поэтому удаление все время скрыто.

Это мой скрипт:

 $(function() {

  var max_fields = 10;
  var $wrapper   = $(".containerDim");
  var add_button = $(".add_form_field");
  
  $(add_button).click(function(e) {
    
    e.preventDefault();
    const vals = $("> .item input[name^=poids]",$wrapper).map(function() { return  this.value }).get()
    const val = vals.length === 0 ? 0 : vals.reduce((a, b) => a   b);
    
    if ($("> .item",$wrapper).length < max_fields amp;amp; val < 300) {
      const $form_colis = $(".item").first().clone();
      $form_colis.find("input").val("");
      // $wrapper.append($form_colis); //add input box
      $('.item', $wrapper).last().after($form_colis);
      
    } else {
      var err_msg = 'Veuillez nous contacter!';
      //alert(err_msg);
      window.alert(err_msg);
    }
  });

  $wrapper.on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
  })
}); 
 .delete:nth-of-type(1) {
  display:none;
}
.delete:first-of-type {
  display: none;
} 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="dimensions" class="row item">
    
  <div class="col-sm-3">
    <label>Longueur(cm):</label>
    <input type="number"  min="0" name="longueurs[]" id="length"  value="<?php //echo $length;?>" required>
  </div>

  <div class="col-sm-3">
    <label>Largeur(cm):</label>
    <input type="number"  min="0" name="largeurs[]" id="width" value="<?php //echo $width;?>" required>
  </div>
  <div class="col-sm-3">
    <label>Hauteur(cm):</label>
    <input type="number"  min="0" name="hauteurs[]" id="height" value="<?php //echo $height;?>" required>
  </div>
  <div class="col-sm-2">
    <label>Poids(Kg):</label>
    <input type="text"  min="0" name="poids[]" id="weight" value="<?php //echo $weight;?>"required>
  </div>  
  
  <!--div class="col-sm-1 "-->
  <br>
  <a href="#" class="delete">Delete</a>
  <!--/div-->
    
</div> <!-- row dimensions item -->

Есть какое-либо решение для решения этой проблемы.

Заранее благодарю вас

Комментарии:

1. предоставленный вами jQuery и селекторы DOM не совпадают с HTML

Ответ №1:

Внутри оболочки .containerDim есть .items и только они могут быть использованы в качестве соответствующей ссылки на индексацию:

 .containerDim .item:nth-child(1) .delete {}

или

 .containerDim .item:first-of-type .delete {}
 
 jQuery(function($) {

  const max_fields = 10;
  const $wrapper = $(".containerDim");
  const add_button = $(".add_form_field");
  
  $(add_button).click(function(e) {
    e.preventDefault();
    const vals = $(".item input[name^=poids]", $wrapper).map(function() {
      return  this.value
    }).get()
    
    const val = vals.length === 0 ? 0 : vals.reduce((a, b) => a   b);

    if ($(".item", $wrapper).length < max_fields amp;amp; val < 300) {
      const $itemClone = $(".item", $wrapper).eq(0).clone();
      $("input", $itemClone).val("");
      $wrapper.append($itemClone); // use .append()
    } else {
      window.alert('Veuillez nous contacter!');
    }
  });

  $wrapper.on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).closest('.item').remove(); // use .closest() and go for a specific class!
  });
}); 
 .containerDim .item {
  padding: 20px;
  border: 1px solid #ddd;
}

.containerDim .item:nth-child(1) .delete{
  display: none;
} 
 <div class="containerDim">
  <!-- Remove the ID id="dimensions"  you cannot have duplicated iDs -->
  <div class="row item">
    <div class="col-sm-3">
      <label>Longueur(cm):</label>
      <input type="number" min="0" name="longueurs[]" id="length" value="10" required>
    </div>
    <div class="col-sm-3">
      <label>Largeur(cm):</label>
      <input type="number" min="0" name="largeurs[]" id="width" value="10" required>
    </div>
    <div class="col-sm-3">
      <label>Hauteur(cm):</label>
      <input type="number" min="0" name="hauteurs[]" id="height" value="10" required>
    </div>
    <div class="col-sm-2">
      <label>Poids(Kg):</label>
      <input type="text" min="0" name="poids[]" id="weight" value="1" required>
    </div>
    <a href="#" class="delete">Delete</a>
  </div>
</div>
<button class="add_form_field">ADD MORE</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Метки: