Question

你好堆栈溢出！我在创建列表网页时遇到问题，其中我有两个起始元素，我可以添加元素并删除元素。我在网站上走得很远但是我遇到了一个我研究过的问题并且在过去的一个半小时里难以接受。在运行我的takeAwayElement函数时，元素的innerHTML被设置为0，这使得字符串消失，但问题是CSS仍然存在并且它显示蓝色背景，我试图将innerCSS设置为＆＃39; ＆＃39;但它导致我在网页上的每一个列表元素都变成了什么，我该如何解决这个问题呢？

非常感谢你，如果你决定帮助我，这意味着你阅读我的帖子，这真的表明你关心，谢谢你。

我的HMTL

<!DOCTYPE html>
<html>
<head>
    <title>JS playground</title>
    <link rel="stylesheet" href="style.css">
</head>
<h1 id="headerElement" style="text-align: center;">List testing!</h1>
<div class="listDiv">
     <ul class="ulList" id="ulTop">
          <li>Hello World!</li>
          <li>After this element is all added lists</li>
     </ul>
     <script src="list.js"></script>
     <button onclick="addElementItem()">Click me to add a list item</button>
     <button onclick="takeAwayElement()">Click me to take away a list item.</button>
</div>
</html>

我的CSS

.listDiv {
     width: 800px;
     margin: 0 auto;
     background-color: lawngreen;
     padding: 20px;
}
.ulList li{
     list-style: none;
     text-align: center;
     padding: 10px;
     margin: 5px 0px;
     background-color: lightskyblue;
}

MY JS

function addElementItem() {
var list = document.getElementById('ulTop');
var newListItem = document.createElement('li');
var newListText = document.createTextNode('NEW ELEMENT ADDED');
newListItem.appendChild(newListText);
list.appendChild(newListItem);
}

function takeAwayElement() {
var list = document.getElementById('ulTop');
var lastItem = list.lastChild;
list.innerHTML = '';
};

Answer 1

尝试在takeAwayElement（）中添加它：

lastItem.style.backgroundColor='';

Answer 2

function takeAwayElement() {
var list = document.getElementById('ulTop');
var lastItem = list.lastChild;
list.removeChild(lastItem)
};

使用JS remove child来删除元素，而不是使用innerHTML

Answer 3

首先，您要清空整个列表而不是最后一项。其次，这不是你删除元素的方式。

试试这个，让我知道它是否有效：

function takeAwayElement() {
    var list = document.getElementById('ulTop');
    setTimeout(function() {
       var lastItem = list.lastChild;
       list.removeChild(lastItem); // This would remove the element from DOM with no other need to play with CSS
    }, 0);
};

除此之外，我还建议您不要将脚本包含在HTML的中间。将它们放在<head>中或最后放在<body>内（首选方法）

无法使用javascript删除CSS

3 个答案: