EdibleMuffin EdibleMuffin - 3 months ago 8
Javascript Question

Remove html element on last line with javascript

I have a string that looks like this:

<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>2/"><img src="domain.com/good1.jpg" alt="001.jpg"/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>3/"><img src="domain.com/good2.jpg" alt="002.jpg"/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>4/"><img src="domain.com/good3.jpg" alt="003.jpg"/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>4/"><img src="domain.com/good4.jpg" alt="003.jpg"/></a></div><!--nextpage-->


Now I want to remove the ahref link on the last line only and I also want to remove
<!--nextpage-->
on the last line. The final result should look like this:

<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>2/"><img src="domain.com/good1.jpg" alt="001.jpg"/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>3/"><img src="domain.com/good2.jpg" alt="002.jpg"/></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>4/"><img src="domain.com/good3.jpg" alt="003.jpg"/></a></div><!--nextpage-->
<div class="image-wrap"><img src="domain.com/good4.jpg" alt="003.jpg"/></div>


I'm having trouble getting my code to work. Here it is:



var val = '<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>2/"><img src="domain.com/good1.jpg" alt="001.jpg"/></a></div><!--nextpage-->\n<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>3/"><img src="domain.com/good2.jpg" alt="002.jpg"/></a></div><!--nextpage-->\n<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>4/"><img src="domain.com/good3.jpg" alt="003.jpg"/></a></div><!--nextpage-->\n<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>4/"><img src="domain.com/good4.jpg" alt="003.jpg"/></a></div><!--nextpage-->\n';

var ele = document.createElement('div');
ele.innerHTML = val;
ele.lastChild.remove();
var a = ele.lastChild;
ele.replaceChild(a.firstChild, a);
alert(ele.innerHTML);





Can someone help me fix the code?

Answer
var val = '<div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>2/"><img src="domain.com/good1.jpg" alt="001.jpg"/></a></div><!--nextpage--><div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>3/"><img src="domain.com/good2.jpg" alt="002.jpg"/></a></div><!--nextpage--><div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>4/"><img src="domain.com/good3.jpg" alt="003.jpg"/></a></div><!--nextpage--><div class="image-wrap"><a class="ajax-load-next" href="<phpcode><?php echo get_permalink( $post->ID ); ?></phpcode>4/"><img src="domain.com/good4.jpg" alt="003.jpg"/></a></div><!--nextpage-->';

var ele = document.createElement('div');
ele.innerHTML = val;
var children = ele.children;
var lastDiv = children[children.length - 1];
var a = lastDiv.firstChild;
var img = a.firstChild;
lastDiv.appendChild(img);
a.remove();
var childNodes = ele.childNodes;
var comment = childNodes[childNodes.length - 1];
comment.remove();
alert(ele.innerHTML);