更新輸入字段值的基礎上添加或刪除div與jquery

Question

如何更新輸入字段數基於添加或刪除使用Jquery的新div。

// HTML Code. 
<a id="test" href="javascript:void(0);">Add</a> <br /> 
<input type="number" id="filled"> 
<div id="box"></div> 

// Jquery Code 
$(document).ready(function() { 
    $('#test').on('click', function() { 
     $('#box').append('<div id="p1"><input type="text" name="test[]"><a href="javascript:void(0);" class="delrow">Remove</a></div>'); 

     var count = $('#box #p1').length; 
     $("#filled").val(count); 

     $(".delrow").on('click', function() { 

      $("#filled").val(count - 1); 

      $(this).parent().parent().remove(); 
     }); 

    }); 
}); 

請看看這個fiddle

其次是換掉一個div，而不是父母的最佳方式（）父（）刪除（）。;

Answer 1

根據我的理解，當您添加新的文本框時要增加計數，並且在刪除它時減少計數。

• 我已刪除您append -ed格文本框中id。

• 我從$('#box #p1')改變了$('#box input')，讓 您可以根據內部box格輸入字段 的數量得到文本框的數量。

• 我在刪除文本框時添加了--count。

• $(this).parent().remove();我改變了這個，所以你可以 一次刪除一個文本框。

$(document).ready(function() { 
 
    $('#test').on('click', function() { 
 
     $('#box').append('<div><input type="text" name="test[]"><a href="javascript:void(0);" class="delrow">Remove</a></div>');//Removed id 
 
     var count = $('#box input').length; //Added input to selector 
 
     $("#filled").val(count); 
 
     $(".delrow").on('click', function() { 
 
      $("#filled").val(--count);//Changed Count 
 
      $(this).parent().remove();//Changed Here 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="test" href="javascript:void(0);">Add</a> <br /> 
 
<input type="number" id="filled"> 
 
<div id="box"></div>

Answer 2

其次是換掉一個div，而不是父母的最佳方式（）父（）刪除（）。;

您可以使用closest()：

$(this).closest('div').remove(); 

對於你的問題，你可以定義兩個不同的事件處理程序的第一部分。第二個是爲了將刪除點擊委託給主框下的動態創建的div。

爲了避免重複ID，您就可以將號碼添加到您的ID：當前格數：

$('#box').append('<div id="p' + count + '">...... 

末點：

爲什麼聲明內的另一個事件處理程序是一個威脅嗎？ 你的情況：

$(".delrow").on('click', function() { 

因爲，這樣你會附加更多的時間相同的事件處理程序，以每個新創建的div。這意味着你的代碼會多次調用這個事件處理程序。爲了測試這個部分，你可以添加一個控制檯日誌消息。

所以，你有兩個主要的可能性：

• 附加事件處理程序到新創建的div：

  $（ 「＃箱#P」 +計數）。在（ '點擊' ，函數（）{

• 委託的情況下對兒童的箱格下的div

  $（ 「＃盒」）。在（ '點擊'， '.delrow'，函數（）{

的片段：

$('#test').on('click', function() { 
 
    var count = $('#box div[id^=p]').length; 
 
    $('#box').append('<div id="p' + count + '"><input type="text" name="test[]"><a href="javascript:void(0);" class="delrow">Remove</a></div>'); 
 
    $("#filled").val(count); 
 
}); 
 

 

 
$("#box").on('click', '.delrow', function() { 
 
    var count = $('#box div[id^=p]').length; 
 
    $("#filled").val(count - 1); 
 
    $(this).closest('div').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<a id="test" href="javascript:void(0);">Add</a> <br /> 
 
<input type="number" id="filled"> 
 
<div id="box"></div>