# Remove element containing if.bind

**URL:** https://discourse.aurelia.io/t/remove-element-containing-if-bind/445
**Category:** Help Requests
**Created:** [November 28, 2017, 2:53pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445 "2017-11-28T14:53:43Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![glennpierce](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/glennpierce/32/743_2.png) [@glennpierce](https://discourse.aurelia.io/u/glennpierce)
#### Post date: [November 28, 2017, 2:53pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445/1 "2017-11-28T14:53:43Z")

</div>

If I have a div with a if.bind like

```
<ul>
  <div if.bind="menu.hasSubMenuItems" >
    <li>Something</li>
  </div>
  <div if.bind="!menu.hasSubMenuItems" >
    <li>Something Else</li>
  </div>
</ul>

```

Can I have the if remove the html element in is placed on ?  
I wan’t to remove the div’s here .

If that possible. I think I use to do this with the Angular 1

---

<div class="post-metadata">

### Author: ![stsje](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stsje/32/1418_2.png) [@stsje](https://discourse.aurelia.io/u/stsje)
#### Post date: [November 28, 2017, 3:12pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445/2 "2017-11-28T15:12:12Z")

</div>

Why wouldn’t you just place the `if` binding on the `<li>` element itself?

---

<div class="post-metadata">

### Author: ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)
#### Post date: [November 28, 2017, 3:17pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445/3 "2017-11-28T15:17:56Z")

</div>

I guess an alternative with the improved binding syntax this would be:

> [@glennpierce](#):
>
> \<ul\>  
> \<li if.bind=“menu.hasSubMenuItems” \>Something\</li\>  
> \<li else\>Something Else\</li\>  
> \</ul\>

---

<div class="post-metadata">

### Author: ![glennpierce](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/glennpierce/32/743_2.png) [@glennpierce](https://discourse.aurelia.io/u/glennpierce)
#### Post date: [November 28, 2017, 3:35pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445/4 "2017-11-28T15:35:54Z")

</div>

Yeah that’s ok for my simplification. My real code has nested if.bind elements though and I am not sure that will work for my materialize accordion.

The full template is

```
<ul class="side-navigation z-depth-2">

	<div repeat.for="menu of menus">

		<div if.bind="menu.hasSubMenuItems" >
			  <li class="collapsible-accordion">
			    <ul md-collapsible="accordion: true;">
				<li class="list-level-two">
				    <div class="collapsible-header">${menu.menuItem.title()}</div>
				    <div class="collapsible-body">
					<ul>
					    <li repeat.for="menuItem of menu.subMenuItems()" class="list-level-three">
					      <a click.delegate="showFlatPage(menuItem.pageId())" href.bind="menuItem.title()">${menuItem.title()}</a>
					    </li>
					</ul>
				    </div>
				</li>
			    </ul>
			  </li>
		  </div>

	</div>

</ul>
```

---

<div class="post-metadata">

### Author: ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)
#### Post date: [November 28, 2017, 3:39pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445/5 "2017-11-28T15:39:03Z")

</div>

I would change:

> [@glennpierce](#):
>
> \<div repeat.for=“menu of menus”\>

for

> [@glennpierce](#):
>
> \<template repeat.for=“menu of menus”\>

That should eliminate the div for the repeat.

---

<div class="post-metadata">

### Author: ![glennpierce](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/glennpierce/32/743_2.png) [@glennpierce](https://discourse.aurelia.io/u/glennpierce)
#### Post date: [November 28, 2017, 3:45pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445/6 "2017-11-28T15:45:24Z")

</div>

That would still leave the problem of

`<div if.bind="menu.hasSubMenuItems" >` leaving a div

---

<div class="post-metadata">

### Author: ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)
#### Post date: [November 28, 2017, 4:00pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445/7 "2017-11-28T16:00:01Z")

</div>

> <https://gist.github.com/ormasoftchile/51a114adefc34914818bc4339f482410>

  
I have copied your code to gistrun. Please note that references, unlike knockout observables, don’t use the trailing ‘()’ for binding targets.

---

<div class="post-metadata">

### Author: ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)
#### Post date: [November 28, 2017, 4:05pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445/8 "2017-11-28T16:05:45Z")

</div>

Here is a version with the template improvements.

> **[Bring your Gists to life with GistRun](https://gist.run/embed.html?id=51a114adefc34914818bc4339f482410)**
>
> GistRun is a site for running, creating and updating GitHub Gists. With GistRun you can easily share Gists on StackOverflow.

Best regards.

---

<div class="post-metadata">

### Author: ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)
#### Post date: [November 28, 2017, 4:07pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445/9 "2017-11-28T16:07:13Z")

</div>

Excuse me. I still haven’t learned well how to share gists. Here it is. [https://gist.run/?id=51a114adefc34914818bc4339f482410](https://gist.run/?id=51a114adefc34914818bc4339f482410)

---

<div class="post-metadata">

### Author: ![glennpierce](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/glennpierce/32/743_2.png) [@glennpierce](https://discourse.aurelia.io/u/glennpierce)
#### Post date: [November 28, 2017, 5:06pm UTC](https://discourse.aurelia.io/t/remove-element-containing-if-bind/445/10 "2017-11-28T17:06:09Z")

</div>

Thank you so much for your effort.

In the end I did this based on your help.

```
<ul class="side-navigation z-depth-2">
	<template repeat.for="menu of menus">
	  <li if.bind="menu.hasSubMenuItems" class="collapsible-accordion">
		  <ul md-collapsible="accordion: true;">
		          <li class="list-level-two">
		            <div class="collapsible-header">${menu.menuItem.title()}</div>
		            <div class="collapsible-body">
		                    <ul>
		                      <li repeat.for="menuItem of menu.subMenuItems()" class="list-level-three">
		                        <a click.delegate="showFlatPage(menuItem.pageId())" href.bind="menuItem.title()">${menuItem.title()}</a>
		                      </li>
		                    </ul>
		            </div>
		          </li>
		   </ul>
	  </li>

	  <li if.bind="!menu.hasSubMenuItems" class="list-level-one">
	      <a click.delegate="showFlatPage(menu.menuItem.pageId())" href.bind="menu.menuItem.title()">${menu.menuItem.title()}</a>
	  </li>
	</template>
</ul>
```