# Javascript removing element from the DOM via user input

**URL:** https://forum.kirupa.com/t/javascript-removing-element-from-the-dom-via-user-input/637389
**Category:** web dev
**Created:** [November 6, 2017, 3:08am UTC](https://forum.kirupa.com/t/javascript-removing-element-from-the-dom-via-user-input/637389 "2017-11-06T03:08:10Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Ruth\_Harris\_Shumate](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ruth_harris_shumate/32/8785_2.png) [@Ruth\_Harris\_Shumate](https://forum.kirupa.com/u/Ruth_Harris_Shumate)
#### Post date: [November 6, 2017, 3:08am UTC](https://forum.kirupa.com/t/javascript-removing-element-from-the-dom-via-user-input/637389/1 "2017-11-06T03:08:10Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 6, 2017, 5:23pm UTC](https://forum.kirupa.com/t/javascript-removing-element-from-the-dom-via-user-input/637389/2 "2017-11-06T17:23:40Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Ruth\_Harris\_Shumate](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ruth_harris_shumate/32/8785_2.png) [@Ruth\_Harris\_Shumate](https://forum.kirupa.com/u/Ruth_Harris_Shumate)
#### Post date: [November 7, 2017, 2:28am UTC](https://forum.kirupa.com/t/javascript-removing-element-from-the-dom-via-user-input/637389/3 "2017-11-07T02:28:12Z")

</div>

I am sure I am having a mental block.

```auto
</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>

```

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [November 7, 2017, 1:49pm UTC](https://forum.kirupa.com/t/javascript-removing-element-from-the-dom-via-user-input/637389/4 "2017-11-07T13:49:49Z")

</div>

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 😉 . 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.

---

<div class="post-metadata">

### Author: ![Ruth\_Harris\_Shumate](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ruth_harris_shumate/32/8785_2.png) [@Ruth\_Harris\_Shumate](https://forum.kirupa.com/u/Ruth_Harris_Shumate)
#### Post date: [November 7, 2017, 9:00pm UTC](https://forum.kirupa.com/t/javascript-removing-element-from-the-dom-via-user-input/637389/5 "2017-11-07T21:00:09Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [November 8, 2017, 12:47am UTC](https://forum.kirupa.com/t/javascript-removing-element-from-the-dom-via-user-input/637389/6 "2017-11-08T00:47:45Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Ruth\_Harris\_Shumate](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ruth_harris_shumate/32/8785_2.png) [@Ruth\_Harris\_Shumate](https://forum.kirupa.com/u/Ruth_Harris_Shumate)
#### Post date: [November 8, 2017, 6:05pm UTC](https://forum.kirupa.com/t/javascript-removing-element-from-the-dom-via-user-input/637389/7 "2017-11-08T18:05:32Z")

</div>

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!

```auto
<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>

```

---

<div class="post-metadata">

### Author: ![Ruth\_Harris\_Shumate](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ruth_harris_shumate/32/8785_2.png) [@Ruth\_Harris\_Shumate](https://forum.kirupa.com/u/Ruth_Harris_Shumate)
#### Post date: [November 8, 2017, 6:12pm UTC](https://forum.kirupa.com/t/javascript-removing-element-from-the-dom-via-user-input/637389/8 "2017-11-08T18:12:11Z")

</div>

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!
