Javascript 无法使用jquery从DIV标记中删除产品

我试图创建一个表单，其中有一个字段，用户在其中输入productName

当用户输入产品名称时，通过ajax通过一个添加按钮向他显示一个产品列表。当用户单击添加按钮时，在jquery的帮助下，productName将被写入带有删除按钮的

。

直到这里一切正常。现在我想知道，如果用户单击“删除”按钮，那么该产品名称将从特定的标签中删除。这是第一次奏效。但当我点击下一个项目的删除按钮时。它不起作用。这是我的jquery代码

代码：

$(function(){

$('.addProducts').keyup(function(event)
{
var searchVal=$(this).val().trim();
if(searchVal.length > 0)
{
$.ajax({
url: 'http://localhost/myurl',
data: {
products: $(this).val(),
},
type: 'POST',
dataType: 'html',
success: function(msg)
{
$('#printTheProducts').html(msg);
var productVal=$(this).attr('name');
var addedProductsValue=$('#myAddedProducts').html();
var textValueOfProducts=$('#myAddedProducts').text();
var deleteButton='<input type="button" class="deleteButton" value="Delete" name="'+productVal+'">';
if(textValueOfProducts.length===0)
{

$('#myAddedProducts').html(productVal+deleteButton);   
}
 else
{
var checkAddedProducts=textValueOfProducts.split(",");
if(checkAddedProducts.indexOf(productVal) < 0)
{
    $('#myAddedProducts').html(addedProductsValue+','+productVal+deleteButton);
}
 else
{
alert(productVal+' is already added');
}
 }
                            --------------------------------------------------------------------------------------------
Code where I am Getting problem

$('.deleteButton').click(function()
{   
 var productsTextArray=new Array();
 var productsHtml;
var productsHtmlArray=new Array();
var deleteVal=$(this).attr('name');
 var myAddedProductsTextValue=$('#myAddedProducts').text().trim();
if(myAddedProductsTextValue.length > 0)
{
productsTextArray=myAddedProductsTextValue.split(",");
productsHtml=$('#myAddedProducts').html();
productsHtmlArray=productsHtml.split(",");

}
var deleteId=$.inArray(deleteVal,productsTextArray);
productsHtmlArray.splice(deleteId,1);
// if I add 
$('#myAddedProducts').html(productsHtmlArray.join());
then it prevents this function from working next time.I do not understand why

});
                            --------------------------------------------------------------------------------------------
});

}
});
}
 }); 

    });

$（函数（）{
$（'.addProducts'）.keyup（函数（事件）
{
var searchVal=$（this.val（）.trim（）；
如果（searchVal.length>0）
{
$.ajax({
网址：'http://localhost/myurl',
数据：{
产品：$（this.val（），
},
键入：“POST”，
数据类型：“html”，
成功：功能（msg）
{
$（“#打印产品”）.html（msg）；
var productVal=$（this.attr（'name'）；
var addedProductsValue=$（'#myAddedProducts'）.html（）；
var textValueOfProducts=$（“#myAddedProducts”）.text（）；
var deleteButton=''；
if（textValueOfProducts.length==0）
{
$（'#myAddedProducts'）.html（productVal+deleteButton）；
}
其他的
{
var checkAddedProducts=textValueOfProducts.split（“，”）；
如果（选中AddedProducts.indexOf（productVal）<0）
{
$（'#myAddedProducts'）.html（addedProductsValue+，'+productVal+deleteButton）；
}
其他的
{
警报（已添加productVal+）；
}
}
--------------------------------------------------------------------------------------------
我遇到问题的代码
$（'.deleteButton'）。单击（函数（）
{   
var productsTextArray=新数组（）；
var-productsHtml；
var productsHtmlArray=新数组（）；
var deleteVal=$（this.attr（'name'）；
var myAddedProductsTextValue=$（“#myAddedProducts”）.text（）.trim（）；
如果（myAddedProductsTextValue.length>0）
{
productsTextArray=myAddedProductsTextValue.split（“，”）；
productsHtml=$（'#myAddedProducts'）.html（）；
productsHtmlArray=productsHtml.split（“，”）；
}
var deleteId=$.inArray（deleteVal，productsTextArray）；
productsHtmlArray.splice（deleteId，1）；
//如果我加上
$（'#myAddedProducts'）.html（productsHtmlArray.join（））；
然后它会阻止这个功能下次工作。我不明白为什么
});
--------------------------------------------------------------------------------------------
});
}
});
}
}); 
});

---

问题

---

如何使此删除按钮适用于所有产品名称，以便它可以从

中删除该产品的名称如果没有一个简单的示例，很难理解您的代码在做什么

是否第二次在删除按钮上触发单击事件

如果不是，则问题在于事件处理程序

您可以尝试以下操作：$（'body'）。在（'click'，'deleteButton'，function（）上{ //将代码放在这里。为提高效率，将“body”替换为“delete”按钮的较近父级。 });

如果触发了click事件，那么问题可能在这里：

 var deleteVal=$(this).attr('name');

---

正如我看到的，您为所有产品创建了一个删除按钮，并将其名称属性分配给最后添加的产品。因此，当您单击删除按钮时，它只删除最后一个产品。

请编写HTML代码好吗？因为您重写了HTML，它由

$（'.deleteButton'）绑定。

-您必须了解绑定