удалить элементы javascript jquery

Question

Im пытается удалить строку. Но я не могу понять это на самом деле. Прежде всего, у меня есть кнопка, которая добавит новую строку, которая работает. Но я хочу дать пользователю возможность удалить только что добавленную строку. В строке есть «div» внутри того, что действует как кнопка удаления. Но кнопка удаления не работает?

Я что-то упускаю?

Приветствуйте,

Juki

function addrow() { 
$("#container").append("<div id=\"row_added\"><div class=\"deletebutton\" id=\"delbuttonnumber\"></div><div id=\"addedcolor\" class=\"colorcube\"></div></div>"); 
} 

// deleterow the row 
$(".deletebutton").click(function() { 
    rowclrid = "#" + $(this).parent().attr("id"); 
    $(rowclrid).remove(); 
}); 

Answer 1

Я думаю, что вам нужно использовать метод live. Это добавит события для любого нового элемента, добавленного в DOM, а не только те, которые существуют, когда вы устанавливаете обработчик click.

// deleterow the row 
$(".deletebutton").live('click', function() { 
    $(this).parent().remove(); 
}); 

Вам также не нужно получать строку, получая идентификатор - это проще, как описано выше.

Answer 2

Я предполагаю, что вы назначили обработчик щелчка перед добавлением нового контента, так что обработчик не привязан к этому конкретному элементу. Вы можете использовать .delegate() прослушивать события на всех элементах ниже определенного родительского элемента, независимо от того или нет, уже существуют, они:

$('#container').delegate('.deletebutton', 'click', function(){ 
    $(this).parent().remove(); 
}); 

Это прослушивает всех событий щелчка, которые происходят внутри элемента #container, используя особенность DOM под названием event bubbling, затем проверяет, произошли ли они на элементе .deletebutton, и, если это так, вызывает обработчик.

Обратите также внимание на упрощенный код внутри обработчика.