не удалось удалить продукты из тега DIV с помощью jquery

Question

Я пытаюсь создать форму, в которой есть поле, в которое пользователь вводит productName.

Когда пользователь вводит название продукта, ему будет показан список продуктов через ajax с кнопкой ADD. Когда пользователь нажимает кнопку добавления, productName записывается в <div> с помощью кнопки delete с помощью jquery.

До сих пор все работает нормально. Теперь я хочу, чтобы, если пользователь нажимает кнопку удаления, то это имя продукта удалено из этого<div> tag. Он работает в первый раз. Но когда я нажимаю кнопку «Удалить» для следующего элемента. Это не работает. Вот мой 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 

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

} 
}); 
} 
}); 

    }); 

---

Вопрос
Как я могу сделать эту кнопку Удалить, чтобы работать для все названия продукта, так что он может удалить имя этого продукта от <div>

Answer 1

Его трудно понять, что ваш код является doin g без скрипта, с которой можно играть.

Включено ли событие клика на кнопку удаления во второй раз?

Если нет, то проблема заключается в обработчике событий.

Вы можете попробовать: $ ('body'). On ('click', '.deleteButton', function() { // помещаем сюда код. Заменить 'body' на более близкий родительский элемент delete для эффективности. }); http://api.jquery.com/on/

Если событие щелчок увольняют, то, возможно, проблема здесь:

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

Answer 2

Как я вижу, вы создаете одну кнопку удаления для всех ваших продуктов, и присвоить его имя атрибута к последнему добавляется продукт . Из-за этого при нажатии кнопки удаления удаляется только последний продукт.