JavaScript RemoveChild Array
-
24-10-2019 - |
Вопрос
Это выглядит достаточно просто, но я просто не могу заставить его работать. Я мог бы добавить элементы DOM, но я просто не могу удалить их при использовании массива.
<script language="javascript">
fields = 0;
count = 0;
function addInput() {
if (fields != 10) {
var htmlText = "<input type='search' value='' name='field[]' />";
var remButton = "<input type='button' value='del' onclick='remove()' />";
var newElement = document.createElement('div');
newElement.id = 'SomeID'+fields;
newElement.innerHTML = htmlText + remButton + newElement.id;
var fieldsArea = document.getElementById('text');
fieldsArea.appendChild(newElement);
fields += 1;
} else {
...
}
count++;
}
// NEED HELP FROM HERE PLEASE
// You don't need to Loop, just get the button's id and remove that entire 'SomeID'
function remove() {
fieldsArea = document.getElementById('text');
fieldsArea.removeChild(SomeID1); <-----------------------THIS WORKS!
fieldsArea.removeChild(SomeID+count); <------------------THIS JUST WOULDN'T
count--;
}
</script>
В функции «Удалить» написание какого -либо работы 1 работает и удаляет первый добавленный элемент, но когда я пытаюсь использовать «счет», я просто не могу удалить свои «элементы».
Любая помощь будет наиболее оценена.
Благодарю вас!
Решение
Вы должны сначала получить ссылку на элемент. В настоящее время вы передаете неопределенную переменную SomeID
к функции.
Например:
var element = document.getElementById('SomeID' + fields);
// or starting by zero: var element = document.getElementById('SomeID0');
element.parentNode.removeChild(element);
Если вы хотите удалить div
Для которого нажата кнопка, вы должны передать ссылку на соответствующий div
в remove
функция
'<input type="button" value="del" onclick="remove(this.parentNode)" />';
this
будет ссылаться на кнопку и, как это ребенок div
, this.parentNode
относится к этому div
.
Вы также должны изменить свою функцию, чтобы принять элемент, который должен быть удален:
function remove(element) {
element.parentNode.removeChild(element);
count--;
}
Вы, вероятно, также должны обновить fields
, но я не уверен, как должен работать ваш код.
Если вы хотите удалить их все, вы должны зацикливаться:
for(;fields--;) {
var element = document.getElementById('SomeID' + fields);
element.parentNode.removeChild(element);
}
Также посмотрите на документация removeChild
.
Другие советы
А removeChild
нужен узел (элемент DOM) в качестве параметра. В таком случае
fieldsArea.removeChild(SomeID+count);
Вы можете, например, пройти узел таким образом
fieldsArea.removeChild(document.getElementById('SomeID'+count));