Я работаю над небольшим проектом, в котором у меня есть функция, которая, похоже, не работает! Это моя функция удаления:
$(document).ready(function(){
var id = 0;
var addOpdracht = $('<a/>', {
'class': 'btn btn-success',
'id': 'addOpdracht'
}).on('click', function(){
$('.panel-body').append(getExerciseBlock(id));
id++;
}).html('<i class = "fa fa-plus"></i>');
$('.jumbotron').append(addOpdracht);
})
function getAddBtn(target, i){
var addBtn = $('<a/>', {
'class': 'btn btn-primary'
}).on('click', function(){
$(target).append(getWordPartInput(i));
}).html('<i class = "fa fa-plus"></i>');
console.info(target);
return addBtn;
}
function getRemoveBtn(target, i){
var removeBtn = $('<a/>', {
'class': 'btn btn-danger'
}).on('click', function(){
$(target).remove(getWordPartInput(i));
}).html('<i class = "fa fa-minus"></i>');
console.info(target);
return removeBtn;
}
function getExerciseBlock(i){
var eBlock = $('<div/>',{
'id': i,
'class': 'col-md-12'
});
$(eBlock).append(getAudioBtn(i), getWordInput(i), getWordPartInput(i),
getRemoveBtn(i), getAddBtn(eBlock, i));
return eBlock;
}
function getAudioBtn(id, cValue){
cValue = cValue || '';
var audioBtn = $('<a/>', {
'class': 'btn btn-primary'
}).html('<i class = "fa fa-volume-up"></i>');
return audioBtn;
}
function getWordInput(id, cValue){
cValue = cValue || '';
var wInput = $('<input/>', {
'class': 'form-group form-control',
'type': 'text',
'name': 'question_takeAudio_exerciseWord[]',
'placeholder': 'Exercise',
'id': 'exerciseGetWordInput'
})
return wInput;
}
function getWordPartInput(id, cValue){
cValue = cValue || '';
var wpInput = $('<input/>', {
'class': 'form-group form-control',
'type': 'text',
'value': cValue,
'placeholder': 'Syllables',
'id': 'SyllablesGetWordPartInput'
});
return wpInput;
}
Часть, которая не работает:
function getRemoveBtn(target, i){
var removeBtn = $('<a/>', {
'class': 'btn btn-danger'
}).on('click', function(){
$(target).remove(getWordPartInput(i));
}).html('<i class = "fa fa-minus"></i>');
console.info(target);
return removeBtn;
}
getBtn
работает, но моя функция удаления не работает.
Что мешает моему коду работать должным образом? 'GetAddBtn' дает мне одно дополнительное поле ввода каждый раз, когда я нажимаю на него, теперь я пытаюсь заставить свой removeBtn
делать то же самое, но на этот раз он должен каждый раз удалять одно поле ввода.
Картинка для пояснения: обратите внимание на маленькую синюю табличку "добавить"! это предоставит дополнительные поля ввода! зеленая большая кнопка не связана с проблемой! когда нажимается синяя кнопка, она продолжает добавлять и добавлять поля ввода, но что, если вы нажмете ее слишком много раз и захотите удалить одно? Я надеюсь, что это небольшое РЕДАКТИРОВАНИЕ помогло немного лучше понять, что я имею в виду.
Также поможет код вашей функции getWordPartInput(i)
.
И, пожалуйста, попробуйте отформатировать свой код более читаемым образом
@LudovitMydla jsfiddle.net/DanDy/hqy73b0h рабочий пример, первая красная кнопка работает (наполовину), а все остальные - нет.
Согласно документы jquery, Удалить можно выполнить несколькими способами:
Пример из документов:
<div class = "container">
<div class = "hello">Hello</div>
<div class = "goodbye">Goodbye</div>
</div>
Опция 1:
$( ".hello" ).remove();
Вариант 2:
$( "div" ).remove( ".hello" );
So, add a class attribute to the html element you wish to delete and use one of the above syntax to delete it.
Хорошо, но создаваемые поля ввода (при нажатии на addBtn) не могут иметь классов или идентификаторов (насколько я знаю, и если они могут, то как?), потому что они созданы с помощью «getWordPartInput». поэтому они не существуют, пока я не нажму на маленький синий значок «добавить». а красный должен убрать каждое поле ввода, которое я "добавил". но это должно быть сделано на основе идентификатора
Здесь нужно сделать несколько вещей. Вам нужно изменить свою функцию getRemoveBtn
на что-то вроде этого:
function getRemoveBtn(target, i){
var removeBtn = $('<a/>', {
'class': 'btn btn-danger'
}).on('click', function(){
/* Select all inputs by going to parent first
and then selecting all child inputs with class 'syllable'
I have added this class in your getWordInput() function
as noted bellow
*/
let syllableInputs = $(this).parent().children("input.syllable");
/*
Now when you have ALL inputs of specific div
remove the last one.
*/
syllableInputs[syllableInputs.length-1].remove(target);
}).html('<i class = "fa fa-minus"></i>');
}
Это в основном удаляет только входы из div
, где кнопка удаления: $(this).parent().children("input.syllable")
.
Во-вторых, вы НЕ должен делать назначаете одинаковые идентификаторы в функциях getWordPartInput
и getWordInput
. Цель id
- быть уникальным в вашем html-документе:
var wInput = $('<input/>', {
'class': 'form-group form-control', // Add class here instead of id
'type': 'text',
'name': 'question_takeAudio_exerciseWord[]',
'placeholder': 'Exercise',
'id': 'exerciseGetWordInput' // Don't do this. Use class
})
Но чтобы иметь возможность выбирать эти input
, я создал дополнительный класс syllable
в ваших входах: 'class': 'form-group form-control syllable'
и использовал его как ссылку для выбора каждого входа syllable
, как вы можете видеть в моем коде: $(this).parent().children("input.syllable");
хорошо, а куда должен идти слог 'class': 'form-group form-control'? в совершенно новом вводе, который я делаю, или мне следует изменить класс var wInput? вы прокомментировали «Добавить класс здесь вместо идентификатора», но есть класс, а не идентификатор, не могли бы вы прояснить это, пожалуйста? идентификатор был использован, поэтому я мог указать его для своего CSS. поэтому, если вы не скажете, что это все еще плохая практика, я удалю его, но функциональность была невелика (с точки зрения отправки в файл JSON)
Под комментарием я имел в виду, что при создании входов в функции getWordInput
измените строку 'class': 'form-group form-control',
на что-то вроде: 'class': 'form-group form-control syllable',
И используйте этот новый класс syllable
для форматирования. Не используйте 'id': 'exerciseGetWordInput'
(просто удалите эту строку из своего кода). Использование одного и того же id
на нескольких элементах - действительно плохая практика. Вы можете указать свой CSS для ввода, используя новый класс syllable
последний вопрос, если вы меня не возражаете, как я использую идентификатор для нескольких элементов? разве элементы не просто клонируются? а под слогом "форма-группа" форма-контроль слог, я полагаю, вы имеете в виду ввод, который создает слоги? если да, то это должно быть getWordPartInput (просто для уверенности)
Вы можете назвать это клонированием или копированием, но в конечном итоге на вашей странице может быть более одного элемента с одинаковым я бы. Это не хорошо. Если это ответ на ваш вопрос, отметьте его как таковой.
да, большое спасибо за время и усилия, которые вы вложили в это! ваш код сделал свою работу!
Больше всего нам поможет пример рабочего кода. И, пожалуйста, измените название вопроса. Существует фактическое ключевое слово javascript Удалить, поэтому оно сбивает с толку