За последние 24 часа нас посетил 7661 программист и 445 роботов. Сейчас ищут 143 программиста ...

Не удаляются элементы

Тема в разделе "JavaScript и AJAX", создана пользователем TillTheDayIDie, 13 июн 2018.

  1. TillTheDayIDie

    TillTheDayIDie Новичок

    С нами с:
    11 апр 2018
    Сообщения:
    19
    Симпатии:
    0
    Код (Javascript):
    1. jQuery(document).ready(function($) {
    2.        $('button#addSelect').on('click', function(event) {
    3.            event.preventDefault();
    4.            $('tr.items:last').clone().insertAfter('tr.items:last');
    5.        });
    6. });
    7.  
    8. jQuery(document).ready(function($) {
    9.        $('td > input[type="button"]').on('click', function(event) {
    10.            $(this).parent().parent().remove();
    11.        });
    12. });      
    Есть код собственно, который добавляет tr и удаляет его соответственно, но удаляется только оригинал
     
  2. nospiou

    nospiou Активный пользователь

    С нами с:
    4 фев 2018
    Сообщения:
    1.741
    Симпатии:
    225
    Код (Javascript):
    1. $("table").on( "click", '.remove', function(event) {
    2.   console.log(event.target);
    3. });
     
  3. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.380
    Симпатии:
    462
    Кроме варианта, который показал @nospiou ("делегирование события"), есть второй вариант решения проблемы - первый параметр метода clone() со значением true, о котором вы естественно читали в документации.
    Код (Javascript):
    1. $('#addSelect').on('click', function(e) {
    2.   e.preventDefault(); // уверены, что нужно?
    3.   let item = $('tr.items:last');
    4.   item.clone(true).insertAfter(item);
    5. });
    И не нужно на каждый "чих", делать отслеживание загрузки DOM:
    Код (Javascript):
    1. $(function() {
    2.     // весь код JS тут  
    3. });
    Если нужно перестраховаться от переопределения метода $:
    Код (Javascript):
    1. (function($) {
    2.     // теперь тут везде пишем $ вмето jQuery
    3. }(jQuery));
    --- Добавлено ---
    P.S. Интересно, вы уже решили, что делать, когда будет удалена последняя строка в таблце или это будет ваш следующий вопрос ;)
     
  4. nospiou

    nospiou Активный пользователь

    С нами с:
    4 фев 2018
    Сообщения:
    1.741
    Симпатии:
    225
  5. TillTheDayIDie

    TillTheDayIDie Новичок

    С нами с:
    11 апр 2018
    Сообщения:
    19
    Симпатии:
    0
    @nospiou , @Deonis , большое спасибо, разобрался!
     
  6. TillTheDayIDie

    TillTheDayIDie Новичок

    С нами с:
    11 апр 2018
    Сообщения:
    19
    Симпатии:
    0
    @Deonis, если я правильно понял проблему, о которой вы писали, то решил её так
    Код (Javascript):
    1. jQuery(document).ready(function($) {
    2.        $('button#addSelect').on('click', function(event) {
    3.            event.preventDefault();
    4.            if($('tr.items:last').css('display') == 'none'){
    5.                $('tr.items:last').css('display', 'block');
    6.            }else{
    7.                $('tr.items:last').clone(true).insertAfter('tr.items:last');
    8.            }
    9.        });
    10. });
    11.  
    12. jQuery(document).ready(function($) {
    13.        $('td > input[type="button"]').on('click', function(event) {
    14.            if($('tr.items').length != 1){
    15.                $(this).parent().parent().remove();
    16.            }else{
    17.                $(this).parent().parent().css('display', 'none');
    18.            }
    19.        });
    20. });