Как удалить элемент html через js
Нужно воспользоваться методом document.querySelector() и найти нужный элемент по селектору. Далее вызвать у родителя нужного элемента метод removeChild() , передав ему элемент.
const h1 = document.querySelector('h1') const parent = h1.parentNode parent.removeChild(h1) // элемента больше нет внутри DOM дерева страницы Удалить элемент из массива js
Есть массив и ф-ция, нужно удалять элементы с массива, я понимаю что delete удаляет элемент но после него образовывается «дырка», как его полностью удалить?
var myArr = [1, 2, 3, 6, 7, 13, 349, 3483, 5432]; var doubledOdds = onlyDoubledOdds(myArr); console.log(doubledOdds.length); console.log(doubledOdds); if (doubledOdds === myArr) < console.log('WTF?!'); >else < console.log('Ok'); >function onlyDoubledOdds(sourceArray) < var result = sourceArray; for (var i = 0; i < result.length; i++) < if (i % 2 == 0) < delete result[i]; >else < result[i] *= 2; >> return result; >а вообще оно выводит 9
[ undefined, 4, undefined, 12, undefined, 26, undefined, 6966, undefined ]
WTF?! А нужно:
6
[ 2, 6, 14, 26, 698, 6966 ]
Ok
Отслеживать
81k 9 9 золотых знаков 78 78 серебряных знаков 135 135 бронзовых знаков
задан 11 июл 2016 в 9:04
61 1 1 золотой знак 1 1 серебряный знак 7 7 бронзовых знаков
delete оператор удаляет из памяти, а не из массива. из массива удаляют процедуры, относящиеся к классу массива ( array ), например pop
11 июл 2016 в 9:09
а что должна делать приведенная функция?
11 июл 2016 в 9:11
Про splice знаю, не могу понять как правильно записать. if (i%2 == 0) < result.splice[i]; >
11 июл 2016 в 9:20
@Webitek, а по какому принципу построен массив А нужно: 6 [ 2, 6, 14, 26, 698, 6966 ] ?
11 июл 2016 в 9:24
а почему он должен выбирать число 13? есть описание словами как из исходного массива получить результат?
11 июл 2016 в 10:33
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Для удаления можно использовать специальные методы, такие как
- shift — удалит из начала
- pop — с конца
- splice — из середины
C помощью splice — как раз можно удалять элементы, вставлять элементы, заменять элементы – по очереди и одновременно.
Синтаксис таков:
arr.splice(start[, countDelete[, elemInsert1, . elemInsertN]])
т.е. удалить countDelete элементов, начиная с номера start , а затем вставить elemInsert1, . elemInsertN на их место. Если countDelete не указано, то отрежется все, начиная со start и до конца. Возвращает массив из удалённых элементов.
Пример с удалением выглядит так:
var arr = ["Привет", "тебе", "Миша"]; arr.splice(1, 1); // начиная с позиции 1, удалить 1 элемент alert( arr ); // осталось ["Привет", "Миша"] var arr = ["Привет", "тебе", "мальчик", "Миша"]; // удалить 3 первых элемента и добавить другие вместо них arr.splice(0, 3, "Здароф!") alert( arr ) // теперь ["Здароф!", "Миша"] Отслеживать
81k 9 9 золотых знаков 78 78 серебряных знаков 135 135 бронзовых знаков
ответ дан 11 июл 2016 в 9:16
Алексей Шиманский Алексей Шиманский
71.9k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков
При применении оператора delete не изменяется свойство length массива, поэтому при использовании длины в цикле — разницы не будет.
Функция onlyDoubledOdds делает что-то непонятное, в зависимости от индекса элемента, причем меняет исходный массив, поэтому при сравнении возвращенное значение закономерно равно переданному, а не «WTF»
Если нужно отфильтровать массив — можно воспользоваться функцией filter,
если нужно получить массив на основе существующего, но с другими элементами — можно воспользоваться функцией map,
если хочется за один проход, можно воспользоваться функцией reduce
var myArr = [1, 2, 3, 6, 7, 13, 349, 3483, 5432]; var doubledOddsMapFilter = onlyDoubledOddsMapFilter(myArr); console.log('doubledOddsMapFilter.length', doubledOddsMapFilter.length); console.log('doubledOddsMapFilter', doubledOddsMapFilter); if (doubledOddsMapFilter === myArr) < console.log('WTF?!'); >else < console.log('Ok'); >var doubledOddsReduce = onlyDoubledOddsReduce(myArr); console.log('doubledOddsReduce.length', doubledOddsReduce.length); console.log('doubledOddsReduce', doubledOddsReduce); if (doubledOddsReduce === myArr) < console.log('WTF?!'); >else < console.log('Ok'); >function onlyDoubledOddsMapFilter(sourceArray) < return sourceArray.filter((el, i) =>i % 2 != 0).map(el => el * 2); > function onlyDoubledOddsReduce(sourceArray) < return sourceArray.reduce((acc, el, i) =>< if (i % 2 != 0) acc.push(el * 2); return acc; >, []); >UPDATE: так как начальное решение в вопросе было с ошибкой, то примеры выше ориентирующиеся на пример в вопросе так же ошибочны, проверяться должен сам элемент а не индекс.
var myArr = [1, 2, 3, 6, 7, 13, 349, 3483, 5432]; var doubledOddsMapFilter = onlyDoubledOddsMapFilter(myArr); console.log('doubledOddsMapFilter.length', doubledOddsMapFilter.length); console.log('doubledOddsMapFilter', doubledOddsMapFilter); if (doubledOddsMapFilter === myArr) < console.log('WTF?!'); >else < console.log('Ok'); >var doubledOddsReduce = onlyDoubledOddsReduce(myArr); console.log('doubledOddsReduce.length', doubledOddsReduce.length); console.log('doubledOddsReduce', doubledOddsReduce); if (doubledOddsReduce === myArr) < console.log('WTF?!'); >else < console.log('Ok'); >function onlyDoubledOddsMapFilter(sourceArray) < return sourceArray.filter(el =>el % 2 != 0).map(el => el * 2); > function onlyDoubledOddsReduce(sourceArray) < return sourceArray.reduce((acc, el) =>< if (el % 2 != 0) acc.push(el * 2); return acc; >, []); >delete
где результат вычисления выражения должен быть ссылкой на свойство (объекта), например:
delete object.property delete object['property'] delete object[index] delete property // удаляет свойства глобального объекта, или, // используя инструкцию with, свойства объекта, на который ссылается инструкция
Если результат вычисления выражения не является свойством (объекта), delete ничего не делает.
Параметры
Имя объекта или выражение, результатом вычисления которого является объект.
Целое число, представляющее собой индекс массива, который должен быть удалён.
Возвращаемое значение
Возвращает false, только если свойство существует в самом объекте, а не в его прототипах, и не может быть удалено. Во всех остальных случаях возвращает true.
Описание
Если оператор delete успешно выполняет удаление, он полностью удаляет свойство из объекта. Однако, если свойство с таким же именем существует в цепочке прототипов, объект унаследует это свойство из прототипа.
delete эффективен только применительно к свойствам объектов. Он не оказывает никакого влияния на имена переменных и функций. Присвоение значения свойству без указания объекта (без оператора var) иногда неверно характеризуется, как глобальная переменная, (например x = 5 ). На самом деле происходит присвоение значения свойству глобального объекта.
delete не может удалить определённые свойства встроенных объектов (таких как Object, Array, Math и так далее). В спецификации ECMA-262 они обозначены как DontDelete.
= 42; // создаёт свойство x в глобальном объекте var y = 43; // объявляет новую переменную, y myobj = >; myobj.h = 4; // создаёт свойство h в myobj myobj.k = 5; // создаёт свойство k в myobj delete x; // возвращает true (x - свойство глобального объекта и может быть удалено) delete y; // возвращает false (delete не влияет на имена переменных) delete Math.PI; // возвращает false (delete не влияет на определённые встроенные свойства) delete myobj.h; // возвращает true (свойства, определённые пользователем могут быть удалены) with (myobj) delete k; // возвращает true (эквивалентно delete myobj.k) > delete myobj; // возвращает true (myobj это свойство глобального объекта, не переменная, поэтому может быть удалено)
Если объект наследует свойство от прототипа и не имеет собственного свойства с таким же именем, свойство не может быть удалено при обращении через этот объект. Однако можно удалить это свойство напрямую в прототипе.
function Foo() > Foo.prototype.bar = 42; var foo = new Foo(); delete foo.bar; // возвращает true, но безрезультатно, так как bar - наследуемое свойство alert(foo.bar); // выводит 42, свойство все ещё наследуется delete Foo.prototype.bar; // удаляет свойство из прототипа alert(foo.bar); // выводит "undefined", свойство больше не наследуется
Удаление элементов массива
Когда с помощью оператора delete удаляется элемент массива, длина массива не меняется. Например, если вы удалите a[3] , a[4] по прежнему a[4] , а a[3] не определено. Так будет даже если вы удалите последний элемент массива ( delete a[a.length-1] ).
Когда оператор delete удаляет элемент массива, этот элемент больше не существует в массиве. В следующем примере, trees[3] удаляется с помощью delete .
const trees = ["redwood", "bay", "cedar", "oak", "maple"]; delete trees[3]; console.log(3 in trees); // false
Если вы хотите, чтобы элемент массива существовал, но имел значение undefined, используйте значение undefined вместо оператора delete . В следующем примере, trees[3] принимает значение undefined, но элемент массива все ещё существует:
const trees = ["redwood", "bay", "cedar", "oak", "maple"]; trees[3] = undefined; console.log(3 in trees); // true
Проблема кроссбраузерности
Несмотря на то, что стандарт ECMAScript оставляет порядок итерации по свойствам объектов на усмотрение реализующей стороны, может оказаться так, что все основные браузеры поддерживают порядок итерации, основанный на принципе «свойство добавленное в объект раньше идёт раньше» (по крайней мере для свойств не находящихся в прототипе). Однако, в случае с Internet Explorer, когда кто-нибудь использует delete с каким-либо свойством, это приводит к некоторым неожиданным результатам, заставляя другие браузеры отказаться от использования простых объектов, таких как литералы объектов, в качестве ассоциативных массивов. В Internet Explorer, когда значение свойства установлено в undefined, после удаления этого свойства, если кто-нибудь позже добавит свойство с таким же именем, оно окажется в своей старой позиции, а не в конце итерационной последовательности, как ожидается.
Поэтому, если вы хотите симулировать упорядоченный ассоциативный массив в кроссбраузерной среде, вам придётся либо использовать два отдельных массива (один для ключей и один для значений), либо построить массив из объектов с одним свойством и так далее.
Внешние ссылки
- Глубокий анализ оператора delete
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
JavaScript: как удалить значения из массива
Массивом называется упорядоченный тип данных, хранящий несколько значений. Это означает, что каждый элемент в массиве имеет числовой идентификатор (индекс), который используется для ссылки на его место в строке.
Массивы начинаются с индекса 0 и увеличиваются на 1 для каждого значения. Для обращения к значению в массиве воспользуйтесь соответствующим индексом и заключите его в квадратные скобки [] .
let numbers = [10,20,30,40];// выводит значение с явным указанием индекса
console.log(numbers[0]); # 10
console.log(numbers[1]); # 20
console.log(numbers[2]); # 30
console.log(numbers[3]); # 40// другой способ: цикл for
for(let i=0; i console.log(numbers[i]);
>
Но что, если мы захотим удалить значение из нашего массива? Для этого существует четыре способа, каждый из которых имеет свои плюсы и минусы, о которых поговорим ниже.
Примечание: все четыре способа доступны без какого-либо импорта дополнительных библиотек.
Через ключевое слово delete
Если вы не любите сложностей, то воспользуйтесь простейшим методом удаления значений из массива — ключевым словом delete . Вам нужно всего лишь указать имя переменной с индексом, который хотите удалить.
let numbers = [1,2,3,4];delete numbers[1];
console.log(numbers); // [1, undefined, 3, 4]
Но будьте внимательны. Несмотря на кажущуюся простоту данного способа, он часто приводит к лишней головной боли, поскольку теперь в вашем массиве зияет дыра.
Основной вывод: при удалении значения из массива через delete задайте себе вопрос: «Нужно ли мне переиндексировать массив?».
Через метод pop()
Вам нужно удалить самое большое индексное значение из массива? Или же вы хотите переиндексировать массив так, чтобы избавиться от undefined в конце? Тогда метод pop() — это то, что доктор прописал.
let numbers = [1,2,3,4];numbers.pop();
console.log(numbers); // [1,2,3]
Через метод splice()
Если вы хотите удалить определенное значение из массива, а не конкретный индекс, и вы готовы к переиндексации массива, то присмотритесь к методу splice() .
Сплайсинг массива создает новый массив, который удаляет некое количество значений и обрезает массив слева, начиная с определенного индекса.
let numbers = [1,2,3,4];numbers.splice(2);
console.log(numbers); // [1,2]
Если же вы хотите удалить только одно значение, то воспользуйтесь вторым (не обязательным) параметром в методе splice() .
let numbers = [1,2,3,4];numbers.splice(2,1);
console.log(numbers); // [1,2,4]
Обратите внимание, что мы не выводим результат массива сразу. Это потому, что данный метод будет возвращать удаленные значения.
let numbers = [1,2,3,4];console.log(numbers.splice(2,1)); // [3]
Все, конечно, круто и здорово, однако в реальных примерах вам, вряд ли, удастся захардкодить значение индекса. Поэтому давайте воспользуемся методом indexOf() для поиска индекса значения, соответствующего условию.
// удаляет значение 3 из массива let numbers = [1,2,3,4];
i = numbers.indexOf(3);
if(i >= 0) numbers.splice(i,1);
>
console.log(numbers); // [1,2,4]
Условие if в этом коде используется для того, чтобы подтвердить нахождение значения в массиве. Если же значение не найдено, то метод indexOf() вернет -1 . Таким образом, если i больше или равно 0 , то это значение было найдено в массиве.
Через метод filter()
Метод splice() весьма удобен для нахождения и удаления одного значения. Но бывает так, что вам нужно удалить все вхождения значения (или условия) из массива. В таком случае, вашим новым другом станет метод filter() .
Этот метод принимает функцию в качестве аргумента и сохраняет значения, соответствующие true в функции filter . Чтобы отфильтровать определенное значение, необходимо проверить отрицательные индексы.
let numbers = [1,2,3,4];
numbers = numbers.filter((n) => );
console.log(numbers); // [1,2,4]
Обратите внимание, что нам приходится заново присваивать номера индексов. Дело в том, что, в отличие от метода splice() , filter() возвращает новый массив, а не выполняет действия с исходными данными.
Заключение
Это не все способы удаления значений из массива, но и среди указанных можете выбрать метод по душе или же придумать что-то свое.
- Зачем нужен Strict Mode в JavaScript?
- Малоизвестные функции JavaScript
- Условный JavaScript для экспертов