删除一个 <p> 使用JavaScript

Question

In my code, if the <input> is empty on blur, then a <p> containing a warning message is added with JavaScript. I remove the <p> when the <input> is focused again.

How can I do this without the for loop, since the <div> only has one <p> ?
I'd like to do this with pure JavaScript (no 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

Since the div element will ever only have one p element, then you just have to target the first index of the array variable for removal:

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's solution should work and is probably the best way to do it if you want to support older browsers. Modern browsers also support document.querySelector and document.querySelectorAll. querySelector / querySelectorAll let you select elements using CSS selectors. querySelectorAll will select all matching elements, while querySelector just selects the first one. So here's an alternative solution:

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

Here's a list of browser compatibility for querySelector: http://www.w3schools.com/jsref/met_document_queryselector.asp

Answer 3

I don't think you can do with just JavaScript but if you add <script src="http://code.jquery.com/jquery-2.1.4.js"></script> in your page somewhere you have access to Jquery. You would remove this <p id = "removeThis">some text</p> with this <script> $("#removeThis").remove(); </script> <script> $("#removeThis").remove(); </script> .