first-of-type and nth-of-type(1) are not working with dynamique div

  css, html, javascript, jquery, php

I have a problem with first-of-type and nth-of-type(1) to hide the first element of a class.

In my script, user can add input text and he will have the choice to delate this inputs. the first item (which is the first element)won’t be hidden, so without the link of delate.

The problem that when add first-of-type or nth-of-type(1), all links of delete are hidden. For the script every div item added is the first one, this is why the delete is hidden all time.

This is my script:

.delete:nth-of-type(1) {
  display:none;
}
.delete:first-of-type {
  display: none;
}

<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 -->


$(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 && 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();
              })
            });

There is any solution to resolve that.

Thank you in advance

Source: Ask PHP

LEAVE A COMMENT