動的テキストボックスが削除されない

Question

jqueryでテキストボックスを追加していますが、1つのテキストボックスでは完全性が取り除かれていますが、2つのテキストボックスを追加すると両方が削除されます。

これはjqueryの

<script> 

$(document).ready(function($){ 
    $('.product-form .add-product').click(function(){ 
     var n = $('.text-product').length + 1; 

     var product_html = $('<p class="text-product"><label for="product' + n + '">Name <span class="product-number">' + n + '</span></label> <input required type="text" name="productnames[]" value="" id="product' + n + '" /> <label for="productprice' + n + '">Price <span class="product-number">' + n + '</span></label> <input required type="text" name="productprices[]" value="" id="productprice' + n + '" /><a href="#" class="remove-product">Remove</a></p>'); 
     product_html.hide(); 
     $('.product-form p.text-product:last').after(product_html); 
     product_html.fadeIn('slow'); 
     return false; 
    }); 
    $('.product-form').on('click', '.remove-category', function(){ 
     $(this).parent().fadeOut("slow", function() { 
      $(this).remove(); 
      $('.product-number').each(function(index){ 
       $(this).text(index + 1); 
      }); 
     }); 
     return false; 
    }); 
}); 
</script> 

であると私はやりそこなうのproductnamesとproductpricesテキストボックスの除去を追加するとき、これは、インスタンスproductnamesのための唯一のテキストボックスが追加された場合、それが除去機能が働く私のhtml

<div> 
     <form> 

      <div class="product-form"> 
       <p class="text-product"> 
        <label for="product1">Name <span class="product-number">1</span></label> 
        <input required type="text" name="productnames[]" value="" id="product1" /> 
        <label for="product1">Price <span class="product-number">1</span></label> 
        <input required type="text" name="productprices[]" value="" id="product1" /> 
        <div> 
         <a class="add-product" href="#">Add More</a> 
        </div> 
       </p> 
      </div> 
      <div> 
       <input type="submit" name="submitDetails" value="Finish"/> 
      </div> 

     </form> 
    </div> 

ですが、関数が両方を削除しない

Answer 1

コードは'click', '.remove-category'ではなく$('.product-form').on('click', '.remove-product', function()となるはずです。また、段落要素内にdiv要素を配置しないでください。ナンバリングも少し壊れていますが、あなたはそれを理解することができます。