刪除一個 <p> 使用JavaScript

Question

在我的代碼中，如果<input>在模糊時為空，則包含警告消息的<p>將與JavaScript添加在一起。 當<input>再次聚焦時，我將<p>刪除。

由於<div>只有一個<p> ，我該如何不使用for循環？
我想使用純JavaScript（不使用jQuery）進行此操作。

 function produce_warning(message, div, inpt) { var para = document.createElement("p"); para.setAttribute("class", "warning_msg"); var node = document.createTextNode(message); para.appendChild(node); var element = document.getElementById(div); element.appendChild(para); } function remove_warning(div) { var element = document.getElementById(div).getElementsByTagName("p"); for (var k = element.length - 1; k >= 0; k--) { var item = element[k]; item.parentNode.removeChild(item); } } 

 <div class="col-sm-10 col-lg-5" id="name_div"> <input type="text" class="form-control" onblur="produce_warning('name', 'name_div')" onfocus="remove_warning('name_div')" id="name" placeholder="Full Name"> </div> 

Answer 1

由於div元素永遠只有一個p元素，因此您只需定位要刪除的數組變量的第一個索引：

function remove_warning(){
    // This returns an array
    var element = document.getElementsByTagName("p");
    // Only one p element, so remove from the first index
    element[0].parentNode.removeChild(element[0]);
}

Answer 2

勞埃德銀行（Lloyd Banks）的解決方案應該可以工作，並且如果要支持較舊的瀏覽器，可能是最好的解決方案。 現代瀏覽器還支持document.querySelector和document.querySelectorAll。 querySelector / querySelectorAll使您可以使用CSS選擇器選擇元素。 querySelectorAll將選擇所有匹配的元素，而querySelector僅選擇第一個。 所以這是一個替代解決方案：

//pass the div id to this function,  for example "name_div"
function remove_warning(div){
    // This grabs the first p within the element with id div
    var element = document.querySelector("#"+div+" p");
    // go to element's parent and tell it to remove the element child
    // cause in javascript a child's gotta ask his parent
    element.parentNode.removeChild(element);
}

以下是querySelector的瀏覽器兼容性列表： http : //www.w3schools.com/jsref/met_document_queryselector.asp

Answer 3

我認為您不能只使用JavaScript，但如果在您可以訪問的頁面中添加<script src="http://code.jquery.com/jquery-2.1.4.js"></script>到jQuery。 您可以使用此<script> $("#removeThis").remove(); </script>刪除此<p id = "removeThis">some text</p> <script> $("#removeThis").remove(); </script> <script> $("#removeThis").remove(); </script> 。