jQuery hide the first and last text in div

Personally I wouldn't bother with jquery, and just handle it with css, since you're templating.
If you just add the following two items it should do what you want:

#filtergroup .filterItem:first-of-type a.remCF { display:none; }
#filtergroup .filterItem:last-of-type #andText { font-size:0; }

Select allOpen in new window

But note that in your template, the delete anchor and the and text you have as ids, which means you're creating multiple items with the same id every time you add a row.

Since you don't have a span or anything inside the "and" area, just used font-size:0 instead of hiding it.

Ok, let me see.

But note that in your template, the delete anchor and the and text you have as ids, which means you're creating multiple items with the same id every time you add a row.

I can change that but let me try the CSS first.

Very interesting. I didn't know it can be done with CSS.

:first-of-type, :nth-child and all the ordering pseudo-elements like that can often eliminate a LOT of javascript, and make it lighter and easier to maintain.

But it doesn't work in Edge! Works in Chrome but I have to make it work in Edge too

It's working fine for me:  Any chance you've got an outdated edge version?

Doesn't work for you either...

Second row should have the "delete" (the red x delete) and "And"
Last row should have the "delete" (the red x delete)

I think that's something with the actual character / font.
Even before my changes, I still don't see red, or the character.  In Chrome I see a red box, but not "X" or delete.  So I think there's a font missing.
And different browsers handle missing fonts differently.

If you actually put an "X" character in the span, it will show properly.
So as soon as the font is correctly hooked up it should work.

But in your screenshot above, you also were showing "AND" on the last row, which I don't see on mine.

If I add an "X" character to the span in the anchor tag:

let me see

Now I see it in both Chrome and Edge but why do I still see the "And" on the last row? I also see "And" when the page first loads.

I have this. I've attached my file.

	#filtergroup .filterItem:first-of-type a.remCF { display:none; } /*** new*/
	#filtergroup .filterItem:last-of-type #andText { font-size:0; }

Select allOpen in new window

<div  class="col-sm-1">
												<!--And-->
												And
											</div>
											<div  class="col-sm-1">
												<!--delete-->
												<a href="javascript:void(0);" class="remCF"><span style="color: red">X</span></a>
											</div>

Select allOpen in new window

page.html

That's what's making me wonder about the edge version.
Edge has been "buggy" to say the least, but they update and fix pretty regularly.

I'm on V 42.17134.1.0, do you have an older one?

Ah damn, never mind.
It's because you took out the duplicate ID i mentioned.  The css was specifically targeting that.


#filtergroup .filterItem:last-of-type #andText { font-size:0; }

If you can make that a class name instead, class="andText", and then change that css line to:

#filtergroup .filterItem:last-of-type .andText { font-size:0; }

Then it should work.

That was it! works in both Chrome and Edge.

I'm pretty sure you want to let the user delete the first row if you've at least two rows...

Hmmm... didn't think of that.  You think I should have X on the first row as well?

So, these ?

/*#filtergroup .filterItem:first-of-type a.remCF { display:none; } */
	#filtergroup .filterItem:first-of-type:last-of-type a.remCF {
		display: none;
	} 
	#filtergroup .filterItem:last-of-type .andText {
		font-size: 0;
	}

Select allOpen in new window

If so, I can delete all the rows and one will remain without any And or X.  Still, the first row remains. I think it's ok.

I've attached my file as well

page.html

Yes, I think that looks and acts correctly.

thanks for your help :)

Interesting CSS solution. Thought this can only be done in jQuery. Thanks for your help.