2015-05-22 2 views
2

в моем коде удалить Works первый ряд, но следующие строки не работаетRow удалить не работает

HTML код:

<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 код:

$('.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(); 
}); 

скрипку ссылка: http://jsfiddle.net/vasantharaj/vkfr2fbo/1/

+0

Возможный дубликат [привязка события к динамически созданным элементам?] (Http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) –

ответ

5

Поскольку вы создаете элементы динамически. Вы должны использовать Event Delegation, используя подход .on() делегированных событий.

Использование

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

DEMO

+0

@ humble.rumble, Было бы здорово, если бы доля вашей документации. Также я исправлял проблему. – Satpal

+0

@ humble.rumble, что вы подразумеваете под гаданием? – Satpal

+0

@ humble.rumble, Что делать, если OP хочет переместить класс в 'td' еще' this.parentElement.parentElement'? Нет, он должен будет изменить код, я думаю, что я буду идти медленнее с точки зрения наносекунд, а не ремонтопригодности. – Satpal

0
<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 
0

Вот ваниль Версия JavaScript для будущих зрителей

(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); 
    } 
})();