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

以下代碼包含全部四個中的某些標籤。圖片-1 enter image description here 這裏是代碼：如何刪除特定的div標籤並使用javascript重置其內容

<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顯示每次點擊「添加更多代表」按鈕時的刪除按鈕。 enter image description here 在image-2中，我點擊Add More Delegates按鈕，它顯示下拉選擇列表右側的「刪除」按鈕。

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

代碼是這樣

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

，但沒有運氣。

謝謝。

來源

2011-09-27 leroy

你的問題是沒有意義的 - 這幾乎是不可能的解析 – Alnitak

我知道，圖像會有被更好地理解。 @Alnitak - 謝謝 – leroy

我希望圖片可能有所幫助.... – leroy

對於初學者來說，你的標記是一團糟。您無法使用 進行佈局。閱讀無表格佈局和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/

來源

2011-09-27 08:38:52 Jamiec

我希望我添加圖片讓你明白。我知道這種方式很難理解。 – leroy

@leroy - 提出你的問題，所以你應該可以現在添加圖片。 – Jamiec

刪除按鈕沒有添加相同的id，因爲我在我的問題'id'中提到的值被更改或增加了我創建的每個新行的「1」。 – leroy

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

來源

2011-09-27 08:21:04 adeneo

這應該是一條評論。 – Jamiec

實際上，在HTML5中，您可以使用數字作爲元素ID。 – Alnitak

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

回答

相關問題