アクティブな要素をJavaScriptで削除する

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]); 
 
});

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

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

Answer 2

誤差要素にIDを追加します。その後：

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

またはあなたはそれ

el.className += " classhiddenwithcss"; 

Answer 3

使用CSSクラスを隠し、単に必要に応じてクラスリストからクラスを追加したり、削除することもできます。

また、if/elseの両方のケースでreturnを使用しているため、コードは処理を停止し、残りの作業を続行しません。 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>