#javascript
#язык JavaScript
Вопрос:
Я борюсь с приложением для работы. Я хочу вычеркнуть элемент LI и добавить промежуток со знаком x. Это легко сделать, переключив класс. Однако, когда я «раскрою» класс, щелкнув еще раз. «x» остается, и когда я снова нажимаю на элемент, «x» дублируется. Как я могу предотвратить добавление еще одного «x» или заставить «x» исчезнуть, когда элементы «не помечены»?
const addButton = document.querySelector("#add"); const input = document.querySelector("input[name='input-item'"); const ul = document.querySelector("ul"); const allItems = document.querySelectorAll("li"); for (let i = 0; i lt; allItems.length; i ) { allItems[i].addEventListener("click", myList); } function myList() { let temp = this.classList.toggle("red"); if (temp) { let span = document.createElement("span"); span.innerHTML = "amp;times;"; span.addEventListener("click", function() { this.parentElement.remove(); }); this.appendChild(span); } else if (this.classList.contains("red")) { this.getElementByTagName("span").remove(); } } .red { text-decoration: line-through; color: red; } span { background-color: white; padding: 0 0.3rem; color: black; margin: 0 0.2rem; display: inline-block; } lt;div class="container"gt; lt;ulgt; lt;ligt;bananalt;/ligt; lt;ligt;orangelt;/ligt; lt;ligt;grapeslt;/ligt; lt;/ulgt; lt;input type="text" name="input-item" placeholder="Enter a new item" /gt;lt;button id="add"gt;Add Itemlt;/buttongt; lt;/divgt; Комментарии:
1.
getElementByTagName()написано с ошибкой и, следовательно, должно отображаться сообщение об ошибке в консоли инструментов разработчика. Кроме того, при правильном написании он не возвращает ни одного элемента, и в коллекции нет метода удаления. Попробуйте использоватьquerySelector('span'), и использование имени класса в промежутке сделает его еще более конкретным2. Спасибо Дэвиду Томасу. Я скучал по этому. Правильный код должен быть: this.getElementsByTagName(«span»)[0].удалить();