使用JavaScript删除活动元素

我正在尝试对我正在研究的东西进行验证。基本上，如果没有处理任何输入，它将返回一个红色段落，告诉您输入内容并返回false。我遇到的问题是如何在处理有效值时删除它

var input = document.getElementById('input'),
    button = document.getElementById('add')

function removeItem() {
    var item = this.parentNode
    var parent = item.parentNode
    parent.removeChild(item)

}

button.addEventListener('click', function (e) {
    if (input.value === '') {
        var p = document.querySelector('p')
        p.style.display = 'block'
        return false
    } else if (!input.value === '') {
        p.style.display = ''
        return true
    }

    var userInput = document.createTextNode(input.value)
    var li = document.createElement('li')
    var ul = document.getElementById('todo')

    var remove = document.createElement('button')
    remove.innerHTML = 'Remove'

    remove.addEventListener('click', removeItem);

    ul.insertBefore(li, ul.childNodes[0])
    li.appendChild(userInput)
    li.appendChild(remove)
})

添加
plz添加

p{
显示：无；
颜色：#f00；
}

向错误元素添加id。然后：

var el = document.getElementById('theidyouset')
el.parentNode.removeChild( el );

或者你可以把它藏起来

el.className += " classhiddenwithcss";

---

使用CSS类，只需根据需要从类列表中添加或删除该类

另外，由于您在两种

if/else

情况下都使用了

return

，因此代码将停止处理，不再继续执行其余工作。将

if/else

移动到代码末尾，以便

return

是您最后要做的事情

并且，在语句末尾使用分号

var input=document.getElementById（'input'），
button=document.getElementById（'add'）
函数removietem（）{
var item=this.parentNode；
var parent=item.parentNode；
父母。远程子女（项目）；
}
按钮。addEventListener（'click'，函数（e）{
var p=document.querySelector（'p'）
var userInput=document.createTextNode（input.value）
var li=document.createElement（'li'）
var ul=document.getElementById（'todo'））
var remove=document.createElement（'按钮'）
remove.innerHTML='remove'
remove.addEventListener（'单击'，removeItem）；
ul.insertBefore（li，ul.childNodes[0]）
li.appendChild（用户输入）
li.appendChild（删除）
如果（input.value==''）{
p、 类列表。删除（“隐藏”）；
返回false；
}否则{
p、 添加（“隐藏”）；
返回true；
}
})

p{
颜色：#f00；
}
.隐藏{
显示：无；
}

添加
请添加

一些问题：

• 如果。。。else案例，这（如果可行的话）会使代码的其余部分无法访问

• if

  条件是不必要的（因为

  if

  条件已经为false），但也是错误的：

  优先于
  ==
  ，所以最好使用
  ==。无论如何，它根本不需要
  

以下是更正后的代码：

var input=document.getElementById（'input'），
button=document.getElementById（'add'）；
函数removietem（）{
var item=this.parentNode；
var parent=item.parentNode；
父母。远程子女（项目）；
}
按钮。addEventListener（'click'，函数（e）{
var p=document.querySelector（'p'）；
if（input.value.trim（）=''）{
p、 style.display='block'；
返回false；
}
p、 style.display=''；
var remove=document.createElement（'button'）；
remove.textContent='remove'；
remove.addEventListener（'单击'，removeItem）；
var li=document.createElement（'li'）；
appendChild（document.createTextNode（input.value））；
li.附肢儿童（移除）；
insertBefore（li，todo.childNodes[0]）；
});
p{
显示：无；
颜色：#f00；
}

添加
plz添加


正确缩进代码可能会很有帮助…与其每次单击按钮都修改DOM，不如显示或隐藏它。这是一个好方法，我只是回答了所问的问题。我已经在回答中添加了隐藏它的选项。还有
el.remove（）
@GabrielPozo在javascript逻辑中感谢您的回答，但是“添加”按钮不起作用。@GabrielPozo这不是您的问题答案更新。感谢您抽出一天的时间