Почему JavaScript не удаляет мой элемент при использовании .remove ()? - PullRequest
Новая
       8

Почему JavaScript не удаляет мой элемент при использовании .remove ()?

0 голосов
/ 21 июня 2020

Мои javascript и html определенно подключены, поскольку я запустил console.logs для тестирования.

У меня есть onclick в моем html, который должен запустить menu (). menu () предназначено для удаления моего элемента «фонарики», который является изображением. Однако ничего не происходит. Также нет ошибок, чтобы помочь с отладкой. Я также пробовал использовать идентификатор родительского #changetotext, но ответа не получил. Я, должно быть, делаю что-то довольно c неправильно. 

function menu(){
var el = document.getElementById("lanterns");
el.remove();

};
image

Ответы [ 4 ]

2 голосов
/ 21 июня 2020

отлично работает 

function remove (){
var el = document.getElementById("lanterns");
el.remove();
}
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>The Ludong Chinese Restaurant</title>
  <meta name="description" content="The Ludong Chinese Restaurant">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <button onclick="remove()">remove</button>

    <nav class="navbar navbar-expand-md bg-dark navbar-dark" id="top-bar">
        
        <a class="navbar-brand" href="#">The Ludong</a>
       
        
      </nav>
      <div id="changetotext"><img src="https://res.cloudinary.com/dytmcam8b/image/upload/v1592684095/Chinese%20Restaurant/ludong.jpg" 
      alt="red lanterns" id="lanterns"></div>
     
        
  </body>
</html>
1 голос
/ 21 июня 2020

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

Измените свою menu() функцию на следующее: 

function menu(e) {
    e.preventDefault();
    var el = document.getElementById("lanterns");
    el.remove();
};

И чтобы получить подробную информацию о инициированном событии, измените свой атрибут onclick следующим образом: 

<a href=""><div class="p-2 menuChoice" onclick="menu(event)">Menu</div></a>

Лучшая практика

Хотя приведенное выше решение будет работать должным образом, назначать обработчик onclick элементу непосредственно из разметки не рекомендуется - лучше разделить поведение (JavaScript код ) из структуры (HTML).

1 голос
/ 21 июня 2020

Это точный код, который вы используете? Если это так, вы должны вызвать menu() в HTML с помощью кнопки onclick - или вы можете сделать что-то вроде этого в скрипте: 

button.addEventListener('click', () => menu());

function menu() {
  el.remove();
}
0 голосов
/ 21 июня 2020

, потому что ваш div с onclick находится внутри ссылки <a ..., функция которой здесь заключается в перезагрузке страницы

, вы должны остановить действие родительского элемента с помощью [event] .stopPropagation (); 

function menu(evt){
  evt.stopPropagation();
  var el = document.getElementById("lanterns");
  el.remove();
};
a > div { cursor: pointer }
<a ref="" ><div onclick="menu(event)">click here to remove lanterns </div> </a>
<br>
<div id="lanterns">lanterns</div>
...