CODEWITHSUNDEEP
javascript
EdibleMuffin
EdibleMuffin

Reputation: 43

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?

Upvotes: 0

Views: 75

Answers (2)

Jekin Kalariya
Jekin Kalariya

Reputation: 3507

you can easly do it with jquery. refer below code

<html>
<head>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">


function removeLine(){

    var ele=$('#main');

    var child =$('#main').children().last();

    var subchild=child.children().first();

    var cnt = subchild.contents();
    subchild.replaceWith(cnt);

    var ele1=$('#main');

    ele1.html(ele1.html().substring(0,ele1.html().lastIndexOf("<!--nextpage-->")));



    console.log(ele1.html());


}


</script>



</head>
<body onload="removeLine()">
<div id="main">
<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-->
</div>
</body>
</html>

Upvotes: 0

csander
csander

Reputation: 1380

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);

Upvotes: 1

Related Questions