Php 使用jquery产品配置器添加和删除文本行的最佳方法

我正在使用Jquery创建产品配置程序。我的用户可以向其产品添加自定义文本行。所以你可以说。。。4个带有自定义文本的文本行

我需要知道添加和删除这些行的最佳方式是什么。目前我有以下代码用于添加行

    //Add Text Button
$('a#addText').live('click', function(event) {
    event.preventDefault();

    //Scroll up the text editor
    $('.textOptions').slideUp();
    $('#customText').val('');

    //count how many items are in the ul textList
    var textItems = $('ul#textList li').size();
    var nextNumber = textItems + 1;

    if(textItems <= 5) {

        //Change input to reflect current text being changed
        $('input#currentTextNumber').val(nextNumber);

        //Append a UL Item to the textList
        $('ul#textList').append('<li id="textItem'+nextNumber+'">Text Line. +$5.00 <a class="deleteTextItem" href="'+nextNumber+'">Delete</a></li>');

        //Scroll down the text editor
        $('.textOptions').slideDown();

    }else {

        alert('you can have a maximum of 6 textual inputs!');   

    }
});

//添加文本按钮
$（'a#addText'）.live（'click'，函数（事件）{
event.preventDefault（）；
//向上滚动文本编辑器
$（'.textOptions'）.slideUp（）；
$（'#customText'）.val（''）；
//计算ul文本列表中有多少项
var textItems=$（'ul#textList li'）.size（）；
var nextNumber=textItems+1；
如果（textItems这应该会有帮助

编辑：很明显，我应该考虑到参考资料。
代码正在运行，但没有需要的引用。
那就用这个

var currentIdx = $('ul#textList li').size();

$('a#addText').click(function(event) { 
    event.preventDefault();

    //Scroll up the text editor
    $('.textOptions').slideUp();

    //count how many items are in the ul textList
    var nextNumber = currentIdx++;

    if($('ul#textList li').size() <= 5) {

        //Change input to reflect current text being changed
        $('input#currentTextNumber').val(nextNumber);

        var newLi = $('<li class="textItem' + nextNumber + '">' + 
            $('#customText').val() +
            '<a class="deleteTextItem" href="#">Delete</a></li>');

        newLi.find('a.deleteTextItem').click(function() {
            $(this).parent('li').remove();
        })

        //Append a UL Item to the textList
        $('ul#textList').append(newLi);

        $('#customText').val('');

        //Scroll down the text editor
        $('.textOptions').slideDown();

    } else {
        alert('you can have a maximum of 6 textual inputs!');   
    }
});​

var currentIdx=$（'ul#textList li'）.size（）；
$（'a#addText'）。单击（函数（事件）{
event.preventDefault（）；
//向上滚动文本编辑器
$（'.textOptions'）.slideUp（）；
//计算ul文本列表中有多少项
var nextNumber=currentIdx++；
if（$（'ul#textList li'）.size（）在添加和删除随机ID或类的情况下，尝试增加ID或类通常是一件令人头痛的事，而不是值得的事

更改为项目的单个类

<li class="textItem">

如果在这个过程中，服务器上有任何其他动态数据存储或AJAX，可能也有一些简单的方法来配置这些动态数据存储或AJAX，同时使用元素的公共类。
发送到服务器的行是以某种形状或形式发送的吗？在用户完成之前，ID号是否重要？如“删除”发送ajax。如果不是，你可以完全远离ID，使用公共类。按照我的思路，我认为他可以根据项目的顺序获取行号。这样做需要迭代它们，并根据数据的形式分配ID。这对增量问题有何影响准备好了吗？我想“任何关于添加和删除这些文本行的最简单方法的建议都将不胜感激。”足够清楚。同意..如果它解决了一个问题，但是你有与OP相同的增量复制问题，并且没有提供任何关于你的代码解决方案的反馈。我实现了你的代码，它适用于列表项，但我想我没有提到，当他们键入文本时，它会在页面右侧创建一个div，即DragTable名为#textDrag1、#textDrag2等。这就是我的问题所在。它删除列表项，但当它删除相应的#textDrag div时，当您添加另一个输入时，它会出错。我正在将我拥有的内容上载到服务器供您查看。@charlietfl-我理解，引用也有问题，所以我更新了代码请查看看看我上传的网站，这样你就可以知道我为什么使用ID。我需要像我一样可以拖动的文本。我想不出最好的方法来实现我要做的。它会一直工作，直到你开始删除图片上的内容。字体真的很小。你可以使用
index（）
删除方法。我会把非常简单的演示放在一起。谢谢你，这会非常有帮助。这是破坏我的脑细胞。哈哈。这是一个使用索引的演示…没有ID的，如果你不使用可排序的，只是可拖动的，这个概念应该足以管理删除。我认为这是最好的方式，我只需要想一想我是怎么做的将在我的项目中实现它。感谢演示。帮助很大。
$('#textList').on('click','.textItem a', function(){/* note that live() is deprecated*/
      $(this).parent().remove();
      $('input#currentTextNumber').val( $('#textList li').length );/* note that size() is deprecated*/
      return false;
});