如何刪除特定的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”中提到的腳本中更改為值1

並且下面給出了“add_more”的javascript

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都會顯示刪除按鈕。 在圖像-2中，我單擊“添加更多代理”按鈕，它會在下拉選擇列表右側顯示“刪除”按鈕。

我想要一個用於刪除按鈕的jQuery函數，這樣當我點擊刪除它時應刪除<div id="1">並在刪除div標簽之前重置內容。 下面的圖像-3是我點擊刪除按鈕時想要的輸出。

我試過的代碼就是這個來自於一些參考

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

但沒有運氣。

謝謝。

Answer 1

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

Answer 2

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

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

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

這很簡單：

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

此外，您需要保留已添加項目的ID的運行計數器，並在每次添加新行時遞增此值。

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

此外，我除去多余的<br/>每個格之后。

實例： http ： //jsfiddle.net/cb4xQ/