remove entire menu LI item based on LI ID

Question

I am working with the following block of code:

<li class="standby" id="id4"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>
<li class="standby" id="id5"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>
<li class="standby" id="id6"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>
<li class="standby" id="id7"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>

I have com across quite a few different patterns, but I can not seem to get any to work for what I need. I have been working with /^(?:<li>.*?</li>\s*)/ but I know it's way off. Basically I need to use regex to find and remove an LI based on the Id, which will be handled dynamically. so if the above were a menu, I would need to remove 5 for example. If I can get the regex working to highlight 5 for example in http://regexpal.com/ I should be able to wrap this up.

Update: I need to use a non js based function to accomplish this, so no jquery. specifically I am using the : http://cfquickdocs.com/cf9/#rematchnocase

IDs starting with numbers are not legal according to the HTML spec. — Diodeus - James MacFarlane, Feb 23 '12 at 21:09
I can make them start with, id, not to worry, this is seudo code :) I will fix that now — Chris Hough, Feb 23 '12 at 21:10
Why are you using a regex? Would $('#5').remove() not work? or $('li[id="5"]').remove()? — Nick Bork, Feb 23 '12 at 21:10
I am planning on using the refind function in cf to fix this, no jquery. the menu can have 1-x items too — Chris Hough, Feb 23 '12 at 21:14
You had tagged this question as jquery and thats why you received all the responses about jQuery. — Nick Bork, Feb 23 '12 at 21:18
You tagged this question randomly, and now you're refusing the answer provided? So it's a Coldfusion solution you need, why didn't you stated it before? why php, jquery, ruby?? — Damien Pirsy, Feb 23 '12 at 21:20
I fixed that, my bad. no worries. I needed it for jquery too. — Chris Hough, Feb 23 '12 at 21:48
@Diodeus: it's fine in HTML5, though. Just not in HTML4 (and, presumably, below). — David Thomas, Feb 24 '12 at 18:28

score 1 · Answer 1 · edited May 02 '23 at 21:30

1

Not sure about coldfusion specific syntax, but if it supports non-greedy quantifiers then this will work.

/<li[^>]*id="id5"[\s\S]*?<\/li>/i

edited May 02 '23 at 21:30

General Grievance

4,555
31
31
45

answered Feb 23 '12 at 21:28

Paul Alexander

31,970
14
96
151

disregard the last comment, I am going to test this now to see what if it works – Chris Hough Feb 23 '12 at 21:39
If you have to have it in regexpal then drop the regex literal syntax and select the case insensitive option. – Paul Alexander Feb 23 '12 at 21:39
yeah, tried your example in CF, so far no dice. how would I modify it for regxpal? I think that is a little closer to what cf accepts. – Chris Hough Feb 23 '12 at 21:49
here is a good example I just found http://www.bennadel.com/resources/demo/regular_expression_replace/index.cfm but this solution still barks – Chris Hough Feb 23 '12 at 21:56

score 1 · Answer 2 · edited May 23 '17 at 10:34

The real answer here is that you should not be using a regular expression to parse HTML, because HTML is not a regular language.

Instead, use the Java library JSOUP from within your CF code to manipulate the HTML you're working with.

After you download the jar and add it to your CF classpath, you can do things like this:

<cfset jsoup = CreateObject("java", "org.jsoup.Jsoup")>
<cfsavecontent variable="html">
<li class="standby" id="id4"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>
<li class="standby" id="id5"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>
<li class="standby" id="id6"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>
<li class="standby" id="id7"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>
</cfsavecontent>

<cfset htmlObj = jsoup.parse(html)>
<cfset htmlObj.select('##id7').remove()>

<cfoutput>#htmlObj.html()#</cfoutput>

I've tested this, and it outputs exactly what you're asking for - the original HTML without the specified LI element.

score 0 · Answer 3 · answered Feb 23 '12 at 21:12

0

You've tagged your question with jQuery, so:

$("#id5").remove();

Will do it. Or if the id is in a variable:

var someId = "id5";
$("#" + someId).remove();

You don't need to worry about selecting by element type because you are assigning unique ids right?

Or to remove the _n_th li element:

$("li").eq(4).remove(); // remove fifth element (zero-based indexes)

answered Feb 23 '12 at 21:12

nnnnnn

147,572
30
200
241

@chrishough why you tagged it jquery than? – Damien Pirsy Feb 23 '12 at 21:21

score 0 · Answer 4 · answered Feb 23 '12 at 21:14

0

You appear to have tagged your question with way too many languages to make sense, but here's the answer for PHP:

<?php
$dom = new DOMDocument();
$dom->loadXML($data); // $data is your HTML stuff
// using loadXML so you don't get <html>, <head> and <body> tags added
$node = $dom->getElementById('5');
$node->parentNode->removeChild($node);
$result = $dom->saveXML();
?>

answered Feb 23 '12 at 21:14

Niet the Dark Absol

320,036
81
464
592

yes, I fixed that, my bad. I was looking for the regex pattern, my mistake. sorry – Chris Hough Feb 23 '12 at 21:18
1

In that case, [The pony he comes...](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454) – Niet the Dark Absol Feb 23 '12 at 21:20
I tried this from that post "<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>" that get's me the lis but I need to find one based on a passed in value like id5 – Chris Hough Feb 23 '12 at 21:24
1

I think you missed the point of me linking that post... But anyway, try: `
]+id="id5".*?

Niet the Dark Absol

Feb 23 '12 at 21:26

I hear you, it's not perfect. thank you for your help. I tried your example @ regexpal.com, no luck. – Chris Hough Feb 23 '12 at 21:37

score 0 · Answer 5 · answered Feb 24 '12 at 18:24

I think the expression provided by Kolink will serve you best. Assuming you have your HTML stored in a variable called "htmllist", this code should work:

<cfset htmllist = ReReplaceNoCase(htmllist,'<li[^>]+id="id5".*?</li>\s*','','ALL')>

As Jake Feasel mentioned, HTML is not regular, but this should work. If your problem gets more complicated (for example if you need to take action on how different attributes relate) an XML-based solution may serve you well.

Assuming that your "htmllist" variable includes the surrounding "UL" tags and is valid XML, the following code would be equivalent to the regular expression solution posted above.

<cfset htmllist = ReplaceNoCase(htmllist,"LI>","li>","ALL")>
<cfset xLis = XmlParse(htmllist,false)>
<cfloop index="ii" from="#ArrayLen(xLis.ul.li)#" to="1" step="-1">
    <cfif xLis.ul.li[ii].XmlAttributes["id"] EQ "id5">
        <cfset ArrayDeleteAt(xLis.ul.li,ii)>
    </cfif>
</cfloop>
<cfset htmllist = htmllist = ToString(xLis)>

This is no better to solve the original problem, but might help as a starting point if it gets more complicated.

score 0 · Answer 6 · answered Feb 24 '12 at 18:55

I would do it this way... It doesn't use rematchnocase, but rather uses ColdFusion XML utilities, an XMLSearch/XPath query, and returns the expected results. You'll need to add the root element though (ul).

<cfxml variable="list" casesensitive="false" >
<ul>
    <li class="standby" id="id4"> 
        <a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></li>
    <li class="standby" id="id5"> 
        <a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></li>
    <li class="standby" id="id6"> 
        <a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></li>
    <li class="standby" id="id7"> 
        <a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></li>
</ul>   
</cfxml>
<cfset idToDelete = 'id6'>
<cfset list =  XMLSearch(list,"//li[@id!='#idToDelete#']")>
<cfoutput>#ArrayToList(list,"")#</cfoutput>

This certainly is a more straightforward approach than my suggestion, the difference being that in your case, you are assuming valid XHTML, whereas I assumed the answer should support simple HTML. I like both approaches over RegExp, though. — Jake Feasel, Feb 24 '12 at 22:56

score 0 · Accepted Answer · answered Feb 25 '12 at 21:35

Thank you to my teammate @Alex Brown for the updated regex functions, @Paul Alexander for the correct direction on the php/cf versions and @Splash-x @nnnnn for the jquery versions I needed. here is a test case for the cf side, will update once I get the jquery setup:

<cfsavecontent variable="Psuedo">
<li class="standby" id="id4"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>
<li class="standby" id="id5"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>
<li class="standby" id="id6"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI>
<li class="standby" id="id7"> 
<a href="www.google.com" target="_self" title="Contact Information"> Contact Information<font class="menuItemType">(BB)</font></a></LI> 
</cfsavecontent>
<cfscript >
t=structNew();
//find one and kill it
t.Psuedo=Psuedo;
t.1.testCase1='<li[^>]*?id="id5".*?li>';
t.1.after1=reReplaceNoCase(t.Psuedo,t.1.testCase1,"","All");
t.1.testCase2='<li[^>]*?id="id4".*?li>';
t.1.after2=reReplaceNoCase(t.1.after1,t.1.testCase2,"","All");
t.1.testCase3='<li[^>]*?id="id7".*?li>';
t.1.after3=reReplaceNoCase(t.1.after2,t.1.testCase3,"","All");
//find more than 1 and kill them
t.2.testCase1='<li[^>]*?id="id(5|7)".*?li>';
t.2.after1=reReplaceNoCase(t.Psuedo,t.2.testCase1,"","All");
</cfscript>
<cfdump var="#t#">

remove entire menu LI item based on LI ID

7 Answers7