jQuery issue - $(this).parent().remove();

Question

i found a solution for many problems before here but still cant find answer on this problem. I have a container and I am adding another elements inside dynamically with jQuery. Inside that added div's i have a button so I want when i click that button the and the button to be removed. Here is what i tried so far with no success.

HTML

<div id="menuContainer">
<ul id="menu">
    <li><a href="#" id="addColumn">add Element (max 5)</a></li>
    <li><a href="#" id="addCard">---</a></li>
    <li><a href="#" id="delColumn">---</a></li>
    <li><a href="#" id="delCard">---</a></li>
    <li><a href="#" id="tblReset">---</a></li>
</ul>
</div>
<div id="columns" style="width: 1000px;"></div>

jQuery:

$(function() {
var columns = $('.column').size();

$('a#addColumn').click(function() {
    if (columns < 5) {                  
    var columnName = prompt('Внесете назив за колоната: ');
    var temp = columns + 1;
    $('<div class="column">' + columnName + '<button id="' + temp + '" style="float:right;" class="btnRemoveColumn">X</button></div>').appendTo('div#columns');
    columns++;
}
else { 
    alert("Имате максимален број на колони во таблата");
}
});

$(".btnRemoveColumn").click(function(){
    $(this).parent().remove();
});              
});

All with the CSS can be tried on external site Fiddle so see how all (not) working. Link here

You are trying to bind the event handler to elements that don't exist yet. That won't work. — Felix Kling, Feb 10 '13 at 12:38
The first prompt means "Enter the name for the column:" and the alert means "You have maximum number of columns created." — al1en, Feb 10 '13 at 19:38

score 0 · Accepted Answer · answered Feb 10 '13 at 12:38

0

$(document).on("click", ".btnRemoveColumn", function() {

For dynamic elements, events should be delegated.

answered Feb 10 '13 at 12:38

Muhammad Talha Akbar

9,952
6
38
62

1

@RoryMcCrossan now see it ;) i forgot – Muhammad Talha Akbar Feb 10 '13 at 12:40
yay thanks :D I'm not very familiar with jQuery that why i stack thanks a lot that works – al1en Feb 10 '13 at 12:43
@user2058726 Before posting questions, you must prefer language documentation. Maybe It already got solution of your issue. – Muhammad Talha Akbar Feb 10 '13 at 12:44

jQuery issue - $(this).parent().remove();

1 Answers1