Looking for help with manipulating a menu in HTML? I have a menu that I want to modify by removing and adding list items. While I've had success removing items, I'm struggling to properly use the add method. Here's an example of what my menu structure looks like:
<nav>
<ul id="menu" >
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Teachers", "Index", "Instructor")</li>
<li>@Html.ActionLink("Students", "Index", "Student")</li>
<li>@Html.ActionLink("Courses", "Index", "Course")</li>
<li>@Html.ActionLink("Departments", "Index", "Department")</li>
<li>
<a href="#">Parent</a>
<ul>
<li>@Html.ActionLink("Parent", "Index", "Department")</li>
<li id="std">@Html.ActionLink("Student", "Index", "Department")</li>
</ul>
</li>
</ul>
</nav>
What I tried was storing the object from my script into a variable:
var savedLi = $("#std");
And successfully removing it like this:
$(savedLi).remove();
Now the challenge lies in adding it back to its original position within the nested elements:
var replaceId=$(“nav ul li ul li”);
$(savedLi).add(replaceId);
If you have any suggestions on how to correctly add my list item back to the nested elements, I would greatly appreciate it!