Получение элемента в цикле

Question

Всем привет, при нажатии на "Удалить" должно появиться предупредительное сообщение. Сообщение появляется только при нажатии на первую кнопку "Удалить", а остальные не работают. Я так понимаю обращаться к элементу #delete нужно в цикле, но как это реализовать не знаю

document.querySelector('.js-delete').onclick = function() {
    $.confirm({
      title: 'Вы действительно хотите удалить номер?',
      content: '',
      type: 'dark',
      typeAnimated: true,
    buttons: {
      tryAgain: {
            text: 'Удалить',
            btnClass: 'btn-red',
            action: function(){
              $.confirm({
                title: 'Номер успешно удален',
                content: '',
                type: 'dark',
                typeAnimated: false,
                buttons: {
                  confrime: {
                    text: 'ОК', 
                    action: function () {
                    }
                  }
                }
              });
            }
        },
        cancel: {
            text: 'Отмена', 
            action: function () {
            }
        }
    }
});
  };

body .calc-result {
  width: 60%;
  margin: auto;
}
body .calc-result .wrap {
  width: 100%;
  padding: unset;
  padding-bottom: 50px;
}
body .calc-result .wrap table {
  width: 100%;
  font-family: MuseoSans;
  border-collapse: collapse;
}
body .calc-result .wrap table th {
  background-color: #e2e2e2;
  font-family: MuseoSansBold;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
body .calc-result .wrap table th:nth-child(1) {
  width: 20%;
}
body .calc-result .wrap table tr {
  text-align: center;
}
body .calc-result .wrap table td {
  border: 1px solid #c8c8c8;
  border-collapse: collapse;
}
body .calc-result .wrap table .w {
  font-family: MuseoSansBold;
  font-size: 18px;
  width: 5%;
  text-align: center;
}
body .calc-result .wrap table .t {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
 <div class="calc-result">
    <div class="wrap">
        <div class="title">Список новостей:</div>
        <table cellpadding="4" cellspacing="1">
            <tr><th>Код новости</th><th>Заголовок</th><th>Публикация</th><th>Редактировать</th><th>Удалить</th></tr>

            <tr><td class="w t">1231</td><td class="t">Lorem, ipsum.</td><td class="t"><input type="radio">Публикация</td><td class="t"><a href="admin-news_edit.html" style="text-decoration: underline;">Редактировать</a></td><td class="t"><a href="javascript:void(0);" style="text-decoration: underline;" class="js-delete">Удалить</a></td></tr>
            <tr><td class="w t">1231</td><td class="t">Lorem, ipsum.</td><td class="t"><input type="radio">Публикация</td><td class="t"><a href="admin-news_edit.html" style="text-decoration: underline;">Редактировать</a></td><td class="t"><a href="javascript:void(0);" style="text-decoration: underline;" class="js-delete">Удалить</a></td></tr>
            <tr><td class="w t">1231</td><td class="t">Lorem, ipsum.</td><td class="t"><input type="radio">Публикация</td><td class="t"><a href="admin-news_edit.html" style="text-decoration: underline;">Редактировать</a></td><td class="t"><a href="javascript:void(0);" style="text-decoration: underline;" class="js-delete">Удалить</a></td></tr>
            <tr><td class="w t">1231</td><td class="t">Lorem, ipsum.</td><td class="t"><input type="radio">Публикация</td><td class="t"><a href="admin-news_edit.html" style="text-decoration: underline;">Редактировать</a></td><td class="t"><a href="javascript:void(0);" style="text-decoration: underline;" class="js-delete">Удалить</a></td></tr>
        </table>
    </div>
</div>

Answer 1

на странице не должно быть элементов с одинаковыми id. Для отметки элементов лучше использовать классы, например

<td class="js-delete"></td>

вместо

<a href="#"></a>

пользуйтесь

<a href="javascript:void(0);"></a>

тогда страница не будет подниматься в самый верх при клике

воспользуйтесь таким кодом. document.querySelector() выполняет поиск элемента на странице и при первом совпадении, возвращает соответствующий элемент.

document.querySelector('.js-delete').onclick = function() {
    $.confirm({
      title: 'Вы действительно хотите удалить номер?',
      content: '',
      type: 'dark',
      typeAnimated: true,
    buttons: {
      tryAgain: {
            text: 'Удалить',
            btnClass: 'btn-red',
            action: function(){
              $.confirm({
                title: 'Номер успешно удален',
                content: '',
                type: 'dark',
                typeAnimated: false,
                buttons: {
                  confrime: {
                    text: 'ОК', 
                    action: function () {
                    }
                  }
                }
              });
            }
        },
        cancel: {
            text: 'Отмена', 
            action: function () {
            }
        }
    }
});
  };

Answer 2

Решил следующим образом:

var showDialogButtons = document.querySelectorAll('.delete');
  showDialogButtons.forEach(showDialogButton =>
  showDialogButton.addEventListener('click', function() {
    $.confirm({
      title: 'Вы действительно хотите удалить номер?',
      content: '',
      type: 'dark',
      typeAnimated: true,
    buttons: {
      tryAgain: {
            text: 'Удалить',
            btnClass: 'btn-red',
            action: function(){
              $.confirm({
                title: 'Номер успешно удален',
                content: '',
                type: 'dark',
                typeAnimated: false,
                buttons: {
                  confrime: {
                    text: 'ОК', 
                    action: function () {
                    }
                  }
                }
              });
            }
        },
        cancel: {
            text: 'Отмена', 
            action: function () {
            }
        }
    }
    });
  }));

БЛОГ НА HUSL

Получение элемента в цикле

Ответы (2 шт):