如何刪除特定的div標籤並使用javascript重置其內容

Question

以下代碼包含全部四個中的某些標籤。 圖片-1 這裏是代碼：

<div style='background-color:YellowGreen;height:20px;width:100%;margin-top:15px;font-weight: bold;'> 
      &nbsp;&nbsp;Delegate(s) details: </div> 
      <div style="border:1px solid black;"><br/> 
      <div id="delegates"> 
      <div id="0"> 
      &nbsp;&nbsp; Name of the Delegate: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <input name='contact_person[]' type='text' size="50" maxlength="50" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      Designation: 
      <select name='delegate_type_name[]' class='delegate_type'> 
      <option value='select'>Select</option> 
      <option value='Main'>Main</option> 
      </select> 
      </div><br/> 
      </div> 
      <div> 
      &nbsp;&nbsp; 
<input type="button" name="more" value="Add More Delegates" id="add_more" /> 
      <br /> 
      <br /> 
      </div> 
      </div> 

在第5行以上的代碼，其中<div id="0">改變到我在「add_more」

而對於JavaScript的提及腳本值1「 add_more」下方

jQuery('#add_more').click(function(){ 
     var id = jQuery('#delegates > div:last').attr('id'); 
     var temp = "<div id='"+(parseInt(id)+parseInt('1'))+"'>&nbsp;&nbsp; Name of the Delegate: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' size='50' maxlength='50' name='contact_person[]' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Designation:"; 
     temp += "<select name='delegate_type_name[]' class='delegate_type additional_delegate'><option value='select'>Select</option><option value='Additional'>Additional</option><option value='Spouse'>Spouse</option></select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='button' name='rem' value='Remove' id='remove' /></div><br/>"; 
     jQuery('#delegates').append(temp); 
    }); 

給出在JavaScript代碼以上我已經在temp +可變

添加刪除按鈕

<input type='button' name='rem' value='Remove' id='remove' /> 

圖片2顯示每次點擊「添加更多代表」按鈕時的刪除按鈕。 在image-2中，我點擊Add More Delegates按鈕，它顯示下拉選擇列表右側的「刪除」按鈕。

我想要一個用於刪除按鈕的jQuery功能，以便當我點擊刪除時，它應該刪除<div id="1">並在刪除div標籤前重置內容。在image-3下面是當我點擊刪除按鈕時我想要的輸出。我試過是這樣一些參考

代碼是這樣

jQuery('#remove').click(function(){ 
     var id = jQuery('#delegates > div:last').attr('id').remove(); 
    }); 

，但沒有運氣。

謝謝。

Answer 1

對於初學者來說，你的標記是一團糟。您無法使用 進行佈局。閱讀無表格佈局和CSS。

需要改變的第一件事是你的div的id。一個id不能以數字開頭。我建議命名第一格delegate0。其次，您將在每一個新行上添加一個刪除按鈕，具有相同的id - 頁面上的所有ID都應該是唯一的，所以我建議您將其更改爲class="remove"。

至於你的問題，它真的可以歸結爲需要到一個jQuery處理程序添加到使用.live^docs方法的刪除按鈕。

jQuery('.remove').live('click',function(){ 
    $(this).closest('div').remove(); 
}); 

此外，你需要不斷的添加物品的ID的運行計數器，並增加其加入新行每次：

，因爲這是這麼簡單。

var nextDelegate = 1; 
jQuery('#add_more').click(function(){ 
    ... your code here 
    nextDelegate++; 
}); 

此外，我刪除多餘的<br/>後每div。

活生生的例子：http://jsfiddle.net/cb4xQ/

Answer 2

你不能給一個只有一個數字的元素id，它必須是＃mydiv1，＃mydiv2或者類似的東西，即以一個字母開始而不是一個數字。