2

in my code delete works first row but following rows does not work

html code:

<table class="table table-striped table-bordered table-hover table-condensed tableSiteUser">
    <thead>
        <tr>
            <th>#</th>
            <th>User</th>
            <th>Channel</th>
            <th>Action</th>
        </tr>
        <tr>
            <td contentEditable="true">1</td>
            <td contentEditable="true">www.google.com</td>
            <td contentEditable="true">channel-1</td>
            <td contentEditable="true"><span class="glyphicon glyphicon-trash form-control row-remover">delete</span>
            </td>
        </tr>
    </thead>
    <tbody id="site-table-body"></tbody>
</table>

javascript code:

$('.table tbody').append('<tr><td contenteditable="true">1</td><td contenteditable="true">1</td><td contenteditable="true">1</td><td contenteditable="true"><span class="glyphicon glyphicon-trash form-control row-remover">del</span></td></tr>');

$('.table').on('keydown', 'td:last-child', function (e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode == 9) {
        $('tbody').append('<tr><td contenteditable="true">2</td><td contenteditable="true">2</td><td contenteditable="true">2</td><td contenteditable="true"><span class="glyphicon glyphicon-trash form-control row-remover">del</span></td></tr>');
    }
});

$('span.glyphicon-trash').on('click', function () {
    $(this).closest('tr').remove();
});

fiddle link :http://jsfiddle.net/vasantharaj/vkfr2fbo/1/

Nilesh Mahajan
  • 3,506
  • 21
  • 34
Vasantha Raj
  • 637
  • 1
  • 6
  • 22
  • possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Shaunak D May 22 '15 at 06:15

3 Answers3

6

As you are creating elements dynamically. You need to use Event Delegation using .on() delegated-events approach.

Use

$('.table tbody').on('click', 'span.glyphicon-trash', function() {
    $(this).closest('tr').remove();
});

DEMO

Satpal
  • 132,252
  • 13
  • 159
  • 168
  • @humble.rumble, It would be great if share your documentation. Also I was giving a fix for problem in hand. – Satpal May 22 '15 at 07:38
  • @humble.rumble, What do you mean by guessing? – Satpal May 22 '15 at 07:44
  • @humble.rumble, What if OP wants to move the class to `td` still `this.parentElement.parentElement` will work? No, He will have to change code to I guess I will go for slower in terms of nano-seconds rather than maintainability. – Satpal May 22 '15 at 07:47
1
<td contentEditable="true">
<span class="glyphicon glyphicon-trash form-control row-remover" onclick="js : return deleterow(this);">delete</span>
</td>

<script>
function deleterow(i){
  $(i).closest('tr').remove();
}
</script>

its should be work
Milap Jethwa
  • 471
  • 4
  • 7
0

Here is the vanilla javascript version for future viewers

(Demo)

(function () {
    "use strict";
    var tbodies = document.getElementsByTagName('tbody'), tbody;
    for (var i = 0; tbody = tbodies[i]; i++) {
        tbody.addEventListener('click', function (e) {
            if (e.target.className.indexOf('row-remover') >= 0) {
                e.target.parentElement.parentElement.remove();
            }
        }, false);
    }
})();