Блог

Главная - Вопросы по программированию - Как удалить имя класса, у которого есть счетчик

Как удалить имя класса, у которого есть счетчик

#jquery

#jquery

Вопрос:

Я настраиваю форму счета. Каждый раз, когда я нажимаю на кнопку, addItem функция создает <li> элементы с именем класса element counter . Добавьте, что в то же время рядом с ним также создается кнопка удаления, которая также содержит ‘элемент счетчик’ в качестве имени класса.

Каждый раз, когда я добавляю элемент, счетчик увеличивается.

Но как мне удалить определенную element counter строку с помощью кнопки удалить?

 var verwijderCounter = 0;

function addItems(){
verwijderCounter  ;

$("#description").append("<li class='element" verwijderCounter "'>" $('#formOmschrijving').val() "</li>");
$("#uurprijs").append("<li class='element" verwijderCounter "'>" $('#formUurprijs').val() "</li>");
      
$("#amount").append("<li class='element" verwijderCounter "'>" $('#formUren').val() "</li>");
$("#removeLine").append('<button type="button" class="btn verwijder element' verwijderCounter '">del</button>');

Комментарии:

1. при нажатии кнопки вы должны вызвать функцию, которая удалит эту конкретную строку. в этой функции также уменьшите счетчик

2. Также кажется, что вы повторяете идентификаторы при каждом добавлении. это неправильная практика, и эти повторяющиеся идентификаторы не будут работать, когда вы попытаетесь использовать их в jquery [они всегда будут ссылаться на первый]. Поэтому используйте class вместо

3. @Alive, чтобы умереть, правильно. ваш дизайн с использованием id кажется неправильным подходом. однако решением может быть поиск заключающего родительского элемента (например, строки таблицы или ul) и удаление его.

Ответ №1:

Когда вы добавляете кнопку удаления, сообщите ей счетчик:

Я не тестировал, но это должно быть примерно так:

 $("#removeLine").append('<button id="delete"' verwijderCounter ' type="button" class="btn verwijder element' verwijderCounter '">del</button>');
$( "#delete"   verwijderCounter).click(function() {
  removeItems(verwijderCounter);
});

А затем удалите все элементы с тем же классом с помощью этого:

 function removeItems(counter) {
   $( 'element" counter ).remove();
}

И не уменьшайте счетчик, потому что это испортит ваши имена классов!