如何删除特定的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 + variable

中添加了一个删除按钮

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

每次单击“添加更多代表”按钮时，图像-2显示删除按钮。 在图像-2中，我点击Add More Delegates按钮，它会在下拉选择列表的右侧显示“删除”按钮。

我想要一个用于删除按钮的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++;
});

另外，我在每个div之后删除了多余的<br/>。

实例：http://jsfiddle.net/cb4xQ/