Javascript 如何动态添加和删除<；字段集>；使用原型和脚本？

我正在编写一个基本的配方组织应用程序，我希望能够使用Ajax动态地将其他项目添加到配料列表中

这是一种成分

的外观：

<fieldset id="ingredient_item_0">
    Ingredient <input id="ingredient_0" type="text" size="20" />
    <div id="ingredient_list_0" style="" class="autocomplete"></div>

    Amount <input id="amount_0" type="text" size="5" />

    Unit <input id="unit_0" type="text" size="20" />
    <div id="unit_list_0" class="autocomplete"></div>

    Notes <input id="notes_0" type="text" size="20" />

    <script type="text/javascript">
        new Ajax.Autocompleter('ingredient_0','ingredient_list_0','ingredients.php', {'method':'get', 'paramName': 't'});
        new Ajax.Autocompleter('unit_0','unit_list_0','units.php', {'method':'get', 'paramName': 't'});
    </script>
</fieldset>

成分
数量
单位
笔记
新的Ajax.Autocompleter（'component_0'，'component_list_0'，'components.php'，{'method'：'get'，'paramName'：'t'}）；
新的Ajax.Autocompleter（'unit_0'，'unit_list_0'，'units.php'，{'method'：'get'，'paramName'：'t'}）；

---

（使用prototype和scriptaculous）向页面添加此

的附加副本以及附带的JavaScript的最佳方法是什么，以确保每个副本都有一个唯一的ID？

如果您已经有一个很好的html模板，最简单的方法是使用regexp将模板ID转换为唯一ID，将html模板注入文档中的正确位置，并评估脚本。Prototype的

元素.insert

函数为您完成注入html和评估脚本的所有工作

因此，假设您在一个名为

component\u template

的隐藏div中有一个模板，并用

XXX

标记所有需要唯一id的位置：

<div id="ingredient_template" style="display:none;">
    <fieldset id="ingredient_item_XXX">
        Ingredient <input id="ingredient_XXX" type="text" size="20" />
        <div id="ingredient_list_XXX" style="" class="autocomplete"></div>
        ...
    </fieldset>
</div>

您可以使用此javascript函数查找模板，用下一个配料编号替换

XXX

s，并将其插入

配料列表中：

var ingredientCount = 0;
function addIngredient() {
    var html = $("ingredient_template").innerHTML.replace(/XXX/g, ingredientCount++);
    $("ingredients_list").insert(html);
}

仅供参考，prototype为没有ID的元素分配唯一ID的最佳方法是使用：

$('element').identify();

在您所做的工作中，我个人会利用Prototype的功能，将代码转换为如下内容：

var myTemplate = new Template('<div id="ingredient_template" style="display:none;">'+
                              '<fieldset id="ingredient_item_#{num}">'+
                              'Ingredient <input id="ingredient_#{num}" type="text" size="20" />'+
                              '<div id="ingredient_list_#{num}" style="" class="autocomplete"></div>'+
                              '</fieldset>'+
                              '</div>');


function addIngredient(){
  ingredientCount ++;
  var vals = {num: ingredientCount};
  var htmlstr = myTemplate.evaluate(vals);
  $('ingredients_list').insert(htmlstr)
}

var myTemplate=新模板（“”+
''+
“成分”+
''+
''+
'');
函数添加元素（）{
IngreditCount++；
var VAL={num:IngreditCount}；
var htmlstr=myTemplate.evaluate（VAL）；
$（“成分列表”）。插入（htmlstr）
}

贾斯汀的代码一点问题也没有，只是为了说明总是有很多方法可以实现同样的事情。在您的例子中，只有一个变量需要操作，但由于模板允许多个替换，因此它们可能是一个比多个regexp替换更优雅的解决方案。
此代码用于插入元素，但我在删除元素时遇到了问题。我在模板中添加了一个“onClick=removelement（this.id）”，而我的模板是一个列表元素。函数removeElement（id）{Effect.Fade（id）；//或$（id）.Fade（）；或new Effect.Fade（id）；}这对于html文件中硬编码的列表中的任何项都非常有效。当我以Justin描述的方式动态添加新元素时，我无法删除这些元素——当我单击它们时，什么也不会发生。除了onclick=removelement（this.id）之外，我还尝试在值为
var myTemplate = new Template('<div id="ingredient_template" style="display:none;">'+
                              '<fieldset id="ingredient_item_#{num}">'+
                              'Ingredient <input id="ingredient_#{num}" type="text" size="20" />'+
                              '<div id="ingredient_list_#{num}" style="" class="autocomplete"></div>'+
                              '</fieldset>'+
                              '</div>');


function addIngredient(){
  ingredientCount ++;
  var vals = {num: ingredientCount};
  var htmlstr = myTemplate.evaluate(vals);
  $('ingredients_list').insert(htmlstr)
}