Как удалить элемент HTML с помощью Javascript?

124

Я новичок. Может ли кто-нибудь сказать мне, как удалить элемент HTML, используя исходный Javascript, а не jQuery.

index.html

<html>
<head>
 <script type="text/javascript" src="myscripts.js" > </script>
 <style>
 #dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
 }
 </style>
</head>
<body>
 <div id="dummy"></div>

 <form>
  <input type="submit" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>
</body>

myscripts.js

function removeDummy() {
 var elem = document.getElementById('dummy');
 elem.parentNode.removeChild(elem);
}

Что происходит, когда я нажимаю кнопку отправки, так это то, что она исчезает на очень короткое время, а затем немедленно появляется снова. Я хочу полностью удалить элемент при нажатии кнопки.

javascript html Кодер-новичок
источник

Что, если я нажму на нее, обнаружу ошибку и нажму стоп ?

Alex

Извините, это имеет отношение к теме, но на самом деле это действительно забавно, что он / она назвал себя «Newbie Coder», и теперь его профиль имеет репутацию около 9000. Спрашивать что-то в «старые добрые времена» в наши дни действительно выгодно. :)

Рене

189

Что происходит, так это то, что форма отправляется, и поэтому страница обновляется (с ее исходным содержимым). Вы обрабатываете clickсобытие с помощью кнопки отправки.

Если вы хотите удалить элемент и не отправлять форму, submitвместо этого обработайте событие в форме и вернитесь falseиз обработчика:

HTML:

<form  onsubmit="return removeDummy(); ">
    <input type="submit" value="Remove DUMMY"/>
</form>

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

Но вам вообще не нужна (или не нужна) форма, если ее единственная цель - удалить фиктивный div. Вместо:

HTML:

<input type="button" value="Remove DUMMY" onclick="removeDummy()" />

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

Однако такой стиль настройки обработчиков событий устарел. Кажется, у вас есть хорошие инстинкты в том, что ваш код JavaScript находится в отдельном файле и тому подобное. Следующий шаг - пойти дальше и избежать использования onXYZатрибутов для подключения обработчиков событий. Вместо этого в своем JavaScript вы можете подключить их более новым (около 2000 года) способом:

HTML:

<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}
function pageInit() {
    // Hook up the "remove dummy" button
    var btn = document.getElementById('btnRemoveDummy');
    if (btn.addEventListener) {
        // DOM2 standard
        btn.addEventListener('click', removeDummy, false);
    }
    else if (btn.attachEvent) {
        // IE (IE9 finally supports the above, though)
        btn.attachEvent('onclick', removeDummy);
    }
    else {
        // Really old or non-standard browser, try DOM0
        btn.onclick = removeDummy;
    }
}

... затем вызовите pageInit();из scriptтега в самом конце вашей страницы body(непосредственно перед закрывающим </body>тегом) или изнутри window loadсобытия, хотя это происходит очень поздно в цикле загрузки страницы и поэтому обычно не подходит для подключения события обработчики (например, после загрузки всех изображений).

Обратите внимание, что мне пришлось немного обработать, чтобы справиться с различиями в браузерах. Возможно, вам понадобится функция для подключения событий, чтобы вам не приходилось каждый раз повторять эту логику. Или подумайте об использовании библиотеки, такой как jQuery , Prototype , YUI , Closure или любой из нескольких других, чтобы сгладить эти различия в браузерах для вас. Это очень важно , чтобы понять основной материал происходит, как с точки зрения фундаментальных JavaScript и основ DOM, но библиотеки имеют дело с большим количеством несоответствий, а также обеспечить много полезных утилит - как средство подключения обработчиков событий, которые рассматриваются различия браузеров. Большинство из них также предоставляют способ настройки функции (например,pageInit) для запуска, как только DOM будет готов к манипуляциям, задолго до window loadсрабатывания.

TJ Crowder
источник

Измените его type="button"или вставьте return false;в свою JS-функцию

Пав

@Pav: Думаю, я буду придерживаться отправки, потому что это всего лишь экспериментальное упражнение. Я буду делать несколько проектов, в которых используется submit, так что мне лучше к этому привыкнуть ... В любом случае спасибо за идею.

Newbie Coder

@Newbie: Я добавил еще несколько заметок.

TJ Crowder,

2

почему бы просто не сделать elem.remove ();

Мухаммад Умер

1

@ Ghos3t - несколько способов: 1. Любая функция, которую вы вызываете из обработчика стиля атрибута, должна быть глобальной, а глобальное пространство имен уже Really Crowded ™, и легко выбрать имя функции, которое конфликтует с чем-то другим (это можно решить, используя объект с вероятным уникальным именем и поместив на него все ваши обработчики). 2. Использование старого способа атрибута (или присвоение onxyzсвойству элемента) позволяет использовать только один обработчик, и если вы назначаете свойство, вы заменяете то, что использовалось ранее, поэтому это не очень хорошо сочетается с другими. (продолжение)

TJ Crowder

34

Просто сделай это element.remove();

Попробуйте здесь ПОСМОТРЕТЬ

http://jsfiddle.net/4WGRP/

Мухаммад Умер
источник

5

Будьте осторожны с этим, так как это кажется довольно новым дополнением и не имеет полной поддержки браузера, а именно IE и FF версий 22 и более ранних ( red-team-design.com/… ).

Dule

1

Лично я бы

подождал

2

Что ж, похоже, сейчас это постоянно поддерживается: caniuse.com/#search=remove . Я бы согласился использовать это сейчас. Если вам абсолютно необходима поддержка IE11, я полагаю, что можно легко создать

полифилл

5

Писать ориентированный на будущее код лучше, чем программировать для прошлого. Сэкономьте время на обслуживание и используйте.remove()

Гибольт

9

Вы должны использовать input type = "button" вместо input type = "submit".

<form>
  <input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>

Ознакомьтесь с базовыми ресурсами по HTML и JavaScript в Центре разработчиков Mozilla.

CoderHawk
источник

1

Я изменил вашу ссылку с W3Schools на Центр разработчиков Mozilla. Посмотри на w3fools.com, чтобы узнать мои рассуждения ... Кроме того, хороший ответ :)

Алистер Питтс,

2

@ Аластер Питтс, все в порядке. Я просто хочу указать PO на базовые руководства по html и js ..

CoderHawk,

8

Ваш JavaScript правильный. У вашей кнопки есть кнопка, type="submit"которая вызывает обновление страницы.

Pav
источник

5

Он появляется снова, потому что ваша кнопка отправки перезагружает страницу. Самый простой способ предотвратить такое поведение - добавить return falseк onclickподобному:

<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />

mVChr
источник

4

Измените тип ввода на «кнопка». Как сказали TJ и Pav, форма отправляется. Ваш Javascript выглядит правильно, и я рекомендую вам попробовать его не-JQuery способом :)

Newtang
источник

Думаю, я буду придерживаться отправки, потому что это всего лишь экспериментальное упражнение для моих будущих проектов, в котором используется отправка, поэтому мне лучше к этому привыкнуть ...

Newbie Coder

4

index.html

<input id="suby" type="submit" value="Remove DUMMY"/>

myscripts.js

document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded

    document.getElementById("suby").addEventListener("click", e => {
        document.getElementById("dummy").remove()
    })

})

е-мотив
источник

3

Это правильный код. Вероятно, ваша форма отправляется, и вы видите новую страницу (где элемент снова будет существовать).

Алекс
источник

3

Попробуйте запустить этот код в своем скрипте .

document.getElementById("dummy").remove();

И, надеюсь, удалит элемент / кнопку.

Сим-жнец
источник

2

Это работает. Просто уберите кнопку с «пустышки», divесли хотите сохранить кнопку.

function removeDummy() {
  var elem = document.getElementById('dummy');
  elem.parentNode.removeChild(elem);
  return false;
}

#dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
}

<div id="dummy">
  <button onclick="removeDummy()">Remove</button>
</div>

Развернуть фрагмент

Durtle02
источник

1

Я тоже новичок, но вот один простой и легкий способ: вы можете использовать externalHTML, который представляет собой весь тег, а не только его часть:

EX: <tag id='me'>blahblahblah</tag>«s innerHTML будет blahblahblah, и outerHTML бы все это, <tag id='me'>blahblahblah</tag>.

Так, например, если вы хотите удалить тег, он в основном удаляет его данные, поэтому, если вы измените внешний HTML на пустую строку, это будет похоже на его удаление.

<body>
    <p id="myTag">This is going to get removed...</p>
    <input type="button" onclick="javascript:
        document.getElementById('myTag').outerHTML = '';//this makes the outerHTML (the whole tag, not what is inside it)
    " value="Remove Praragraph">
</body>

Вместо этого, если вы хотите просто не отображать его, вы можете стилизовать его в JS, используя свойства видимости, непрозрачности и отображения.

document.getElementById('foo').style.visibility = hidden;
//or
document.getElementById('foo').style.opacity = 0;
//or
document.getElementById('foo').style.display = none;

Обратите внимание, что opacity при этом элемент все еще отображается, но вы не можете его так часто видеть. Кроме того, вы можете выделять текст, копировать, вставлять и делать все, что обычно, даже если это невидимо.

Visibility больше соответствует вашей ситуации, но при этом останется пустое прозрачное пространство размером с элемент, к которому оно было применено.

Я бы порекомендовал вам отображать, в зависимости от того, как вы делаете свою веб-страницу. Отображение в основном удаляет элемент из вашего представления, но вы все равно можете увидеть его в DevTools. Надеюсь это поможет!

HarryJamesPotter27
источник

Как удалить элемент HTML с помощью Javascript?

Ответы: