Javascript removing element from the DOM via user input

programming web dev
1

I need to prompt for for a color to remove from the list elements. I have able to delete first child and last child and all of the list items. No jquery please. Any help would be appreciate

<html>
	<head>
		<title>Lab 9c</title>
	</head>
	<body>
		<div id="container">
			<h3>My Favorite Colors!</h3>
			<p id="demo">Click the button to insert a color into the list</p>
			<ul id="colors">
				<li id="Red">Red</li>
				<li id="Blue">Blue</li>
			</ul>
		</div>
		<button onclick="addChildToTop()">Adding Node</button>
		<button onclick="removeColor()">Removing Node</button>
		<script>
2

Can you post what you’ve tried? A link to your code would be helpful :slight_smile:

3

I am sure I am having a mental block.

</head>
	<body>
		<div id="container">
			<h3>My Favorite Colors!</h3>
			<p id="demo">Click the button to insert a color into the list</p>
			<ul id="colors">
				<li id="Red">Red</li>
				<li id="Blue">Blue</li>
			</ul>
		</div>
		<button onclick="addChildToTop()"> Adding Node</button>
		<button onclick="removeColor()"> Removing Node</button>
	
	
	<script>	
		
	function addChildToTop(){
		var oldcrayon = "nocolor"
		var crayon = prompt("Please enter a color")		
			if (crayon === null || crayon === oldcrayon || crayon==="") {
         // cancel button was hit
         // or the same value was entered
	    //nothing is empty
    return false;
}
		var newItem = document.createElement("LI");
		var textnode = document.createTextNode(crayon);
		newItem.appendChild(textnode);

		var list = document.getElementById("colors");
		list.insertBefore(newItem, list.childNodes[0]);
}
	function removeColor(){
	   var crayon =prompt("Enter a color to remove from list");
	   var crayon = document.createElement("ul");
		crayon.textContent = ("green");
		document.body.appendChild(crayon);
		crayon.parentNode.removeChild(crayon);
	
	}
	</script>
	</body>
</html>
4

Your removeColor function is all over the place. Not sure why you’re creating an element there. That’s not necessary if you’re trying to remove something :wink: . Getting rid of that also fixes the re-used variable problem. It (crayon) starts as a string you got from the user, but then you wipe it out, replacing it with the element you create.

What you need to do is find an existing element based on what you got from the prompt. In your HTML you have id values matching the colors, so you can use that to easily find elements to remove, but you’ll want to update your addChildToTop function to set ids as well. Then, you just get the to-remove element using document.getElementById(crayon) and run it through the remove code you already have.

1 Like
5

Thanks for the help although I am still confused. For some reason it doesn’t make sense to me. I couldn’t find any example of user input to delete a list from ul. . Thanks for pointing out I was declaring crayon twice. I do that quite often.

6

Here, I made a fiddle with some comments explaining whats happening: https://jsfiddle.net/eosmLew7/

1 Like
7

I got my code to work. Here is what I did. I appreciate your help. I really wanted to get the prompt validation to work but so far no luck. - clicking okay while input empty or hitting the space bar and then click okay. I will keep plugging at it!

<html>
	<head>
		<title>Lab 9c</title>
	</head>
	<body>
		<div id="container">
			<h3>My Favorite Colors!</h3>
			<p id="demo">Click the button to insert a color into the list</p>
			<ul id="colors">
				<li id="Red">Red</li>
				<li id="Blue">Blue</li>
			</ul>
		</div>
		<button onclick="addChildToTop()"> Adding Node</button>
		<button onclick="removeColor()"> Removing Node</button>
	
	
	<script>	
		
	function addChildToTop(){
		
		var newColor = prompt("Please enter a color");		
	   // if (newColor  && newColor.search(/\s/) > 0)
	  // if (newColor !== null && newColor !==" ")
		if (newColor=== null ||  newColor ==="")
 {
     return false 
  }
	  var newElement=document.createElement("LI");
	  newElement.textContent= newColor;
	  var list =document.querySelector("#colors");
	  newElement.setAttribute("id",newColor,list);
	  list.insertBefore(newElement,list.firstChild);
}





	function removeColor(){
	  var color=prompt("Enter a color to remove");
	  var list =document.querySelector('#colors');
	  var oldColor = document.querySelector("#" + color);
      list.removeChild(oldColor);
	}
	</script>
	</body>
</html>
8

Thanks senocular ! I see your validation! . I didn’t see this before I sent you my code and issues with validation. I do appreciate you doing this for me. I like looking at other people’s code and see how they solved the problem… Thanks again!