Remove sub-menu span in wp_nav_menu - wordpress

Question

I have a piece of HTML menu which I want to display in Wordpress with wp_nav_menu.
The HTML
<nav id="navigation" class="ddsmoothmenu">
<ul id="main-menu">
<li><span>Home</span>
<ul>
<li>Home Alternate 2</li>
<li>Home Alternate 3</li>
<li>Home Alternate 4</li>
<li>Home Alternate 5</li>
<li>Home Alternate 6</li>
</ul>
</li>
</ul>
I am adding the following in my Wordpress header.php file to display the nav menu
$defaults = array(
'theme_location' => 'primary',
'menu' => 'Primary Menu',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '<span>',
'link_after' => '</span>',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu($defaults);
However the output is adding the tags also in the second level of the menu items as
<nav id="navigation" class="ddsmoothmenu">
<ul id="main-menu">
<li><span>Home</span>
<ul>
<li><span>Home Alternate 2</span></li>
<li><span>Home Alternate 3</span></li>
<li><span>Home Alternate 4</span></li>
<li><span>Home Alternate 5</span></li>
<li><span>Home Alternate 6</span></li>
</ul>
</li>
</ul>
Is there a way to add the span only for the top level menu item or remove the spans from the second level items?

Answer 1

add_filter( 'wp_nav_menu_objects', function( $items ) {
foreach ( $items as $item ) {
if (!$item->menu_item_parent) {
$item->title = '<span>' . $item->title . '</span>';
}
}
return $items;
});

Answer 2

Ok, While walker seems to be one good way of getting this done, it seems to be pretty elaborate with many lines of codes. I just found out that the easiest way to remove the span for the sub-menu items is with jQuery. Wordpress automatically adds the sub-menu class to the child ul and hence what worked for me was
$('ul.sub-menu li a span').contents().unwrap();
Hope this helps.

Answer 3

Using CSS you can hide the sub-menu of wp_nav_menu
.sub-menu { display:none; }