Question

我正在尝试为我正在处理的事情添加一些验证。基本上如果没有处理输入，它将返回一个红色段落，告诉你输入一些东西并返回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)
})

<input type="text" id="input"/>
<button id="add">Add</button>
<p>plz add</p>
<div class="container">
    <ul id="todo"></ul>
</div>

p {
    display: none;
    color: #f00;
}

Answer 1

一些问题：

return两种if ... else个案例中的else if（如果可行）会使其余代码无法访问。
if条件是不必要的（因为!条件已经为假），但也是错误的：===优先于!==，所以更好使用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) { var p = document.querySelector('p'); if (input.value.trim() === '') { p.style.display = 'block'; return false; } p.style.display = ''; var remove = document.createElement('button'); remove.textContent = 'Remove'; remove.addEventListener('click', removeItem); var li = document.createElement('li'); li.appendChild(document.createTextNode(input.value)); li.appendChild(remove); todo.insertBefore(li, todo.childNodes[0]); });。无论如何，它根本不需要。

以下是更正后的代码：

＆＃13;

p {
 display: none;
 color: #f00;
}

＆＃13;

<input type="text" id="input"/>
<button id="add">Add</button>
<p>plz add</p>
<div class="container">
    <ul id="todo"></ul>
</div>

＆＃13;

list = [2,2,12,14,18,9]
newlist = [2,2,3,5,9,9]

＆＃13;

Answer 2

在error元素中添加一个id。然后：

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

或者你可以隐藏它

el.className += " classhiddenwithcss";

Answer 3

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

此外，由于您在return两种情况下都使用if/else，因此代码将停止处理，而不会继续执行其余工作。将if/else移到代码的末尾，这样return就是你做的最后一件事。

并且，在陈述结尾处使用分号。

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) {
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('button')
remove.innerHTML = 'Remove'

remove.addEventListener('click', removeItem);
  
ul.insertBefore(li, ul.childNodes[0])
li.appendChild(userInput)
li.appendChild(remove)

if (input.value === '') {
 p.classList.remove("hidden");
 return false;
} else  {
  p.classList.add("hidden");
  return true;
}

})

p {
 color: #f00;
}

.hidden {
  display:none;
}

<input type="text" id="input"/>
<button id="add">Add</button>
<p class="hidden">plz add</p>
<div class="container">
<ul id="todo"></ul>
</div>

使用JavaScript删除活动元素

3 个答案: