Использование jquery для удаления всех элементов с заданным идентификатором

У меня есть форма с несколькими промежутками с id = "myid". Я хотел бы удалить все элементы с этим идентификатором из DOM, и я думаю, что jQuery - лучший способ сделать это. Я понял, как использовать метод $.remove(), чтобы удалить один экземпляр этого id, просто выполнив:

$('#myid').remove()

но, конечно, только удаляет первый экземпляр myid. Как перебрать все экземпляры myid и удалить их все? Я думал, что метод jquery $.each() может быть таким, но я не могу понять синтаксис для итерации по всем экземплярам myid и удалить их все.

Если есть простой способ сделать это с помощью обычного JS (не используя jQuery), я тоже к этому открыт. Может быть, проблема в том, что id должен быть уникальным (т.е. Вы не должны иметь несколько элементов с id = "myid" )?

Спасибо,

Крис

Ответ 1

.remove() должен удалить все из них. Я думаю, проблема в том, что вы используете идентификатор. Там должен быть только один элемент HTML с определенным идентификатором на странице, поэтому jQuery оптимизирует и не ищет их всех. Вместо этого используйте класс.

Ответ 2

Все ваши элементы должны иметь уникальные идентификаторы, поэтому не должно быть более одного элемента С#myid

"id" - уникальный идентификатор. Каждый раз, когда этот атрибут используется в документе, он должен иметь другое значение. Если вы используете этот атрибут как крючок для таблиц стилей, может быть более целесообразным использовать классы (элементы группы), чем id (которые используются для идентификации именно одного элемента).

Никогда не пробуйте:

$("span[id=myid]").remove();

Ответ 3

id of dom element shout будет уникальным. Вместо этого используйте класс (<span class='myclass'>). Чтобы удалить весь диапазон с помощью этого класса:

$('.myclass').remove()

Ответ 4

если вы хотите удалить все элементы с соответствующими идентификационными частями, например:

<span id='myID_123'>
<span id='myID_456'>
<span id='myID_789'>

попробуйте следующее:

$("span[id*=myID]").remove();

не забывайте "*" - это удалит их всех сразу - приветствия

Рабочий демонстрационный

Ответ 5

Вы должны использовать class для нескольких элементов, поскольку id означает только один элемент. Однако, чтобы ответить на ваш вопрос в синтаксисе .each(), это будет выглядеть так:

$('#myID').each(function() {
    $(this).remove();
});

Официальная документация JQuery здесь.

Ответ 6

Самый чистый способ сделать это - с помощью html5-селекторов api, в частности querySelectorAll().

var contentToRemove = document.querySelectorAll("#myid");
$(contentToRemove).remove();

Функция querySelectorAll() возвращает массив элементов dom, соответствующих определенному идентификатору. После того, как вы присвоили возвращенный массив var, вы можете передать его как аргумент jquery remove().

Ответ 7

Как уже говорилось, только один элемент может иметь определенный идентификатор. Вместо этого используйте классы. Вот версия jQuery-free для удаления узлов:

var form = document.getElementById('your-form-id');
var spans = form.getElementsByTagName('span');

for(var i = spans.length; i--;) {
    var span = spans[i];
    if(span.className.match(/\btheclass\b/)) {
        span.parentNode.removeChild(span);
    }
}

getElementsByTagName - это самый кросс-браузерный метод, который можно использовать здесь. getElementsByClassName будет намного лучше, но не поддерживается Internet Explorer <= IE 8.

Рабочий демонстрационный пример