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

Ответ 1

Что происходит, когда форма отправляется, и поэтому страница обновляется (с ее оригинальным контентом). Вы обрабатываете событие 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.

Ответ 2

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

Попробуйте здесь LOOK

http://jsfiddle.net/4WGRP/

Ответ 3

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

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

Оформить заказ Центр разработчиков Mozilla для основных ресурсов html и javascript

Ответ 4

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

Ответ 5

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

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

Ответ 6

Измените тип ввода на "button". Как T.J. и Пав сказал, что форму отправляют. Ваш Javascript выглядит корректно, и я рекомендую вам попробовать его не-JQuery:)

Ответ 7

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

Ответ 8

Это работает. Просто удалите кнопку из "dummy" 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>

Ответ 9

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

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

<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;

Ответ 10

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

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

И мы надеемся удалить элемент/.