How to Clear The Last <Li> Tag Within a <Ul>

how to clear the last li tag within a ul

If you want to have the background behind a block item which has only floated items inside, then:

ul {
  overflow: auto;
}

How to remove ONLY the last li from a ul (jQuery)?

The problem in your program that each time you add element to your list there is a click event listener is added to your remove button

I will explain more deeply how your code work so you will understand the problem:

Firstly this is our page that we will work on it as example:

Also our javascript code:

var i = 0;
$(document).ready(function(){
  $(".additem").on("click", function(){
    var val = $("input").val();
    if(val!=="") {
      var elem = $("<li></li>").text(val);
      $(".list-item").append(elem);
      $("input").val("");
      $(".removeitem").on("click", function() {
        i++;
        console.log("Call Remove Event " + i);
        $(".list-item li:last-child").remove();
      });
    }
  });
});

First call: when you add item10 to your list, remove click event listener will be added 1 time to your remove button and when you click remove item10 will only remove from list

also console output : Call Remove Event 1

Second call: when you add also item10 to your list, remove click event listener will be added 2 times to remove button and when you click remove item10 and item9 will be removed from list

console output:

Call Remove Event 2
Call Remove Event 3

The reason for that is when you clicked remove button the last element of your list will be removed 2 times directly it's like you are clicking remove button two times.

Third call: when you add item9 to your list, remove click event listener will be added 3 times to remove button and when you click remove item9,item8 and item7 will be removed from list

console output:

Call Remove Event 4
Call Remove Event 5
Call Remove Event 6

To solve this problem you can either try this way using event.stopImmediatePropagation():

$(document).ready(function(){
  $(".additem").on("click", function(){
    var val = $("input").val();
    if(val!=="") {
      var elem = $("<li></li>").text(val);
      $(".list-item").append(elem);
      $("input").val("");
      $(".removeitem").on("click", function(e) {
        e.stopImmediatePropagation();
        $(".list-item li:last-child").remove();
      });
    }
  });
});

This method will keep any additional handlers on removeitem element from being executed.

Or simply you can put removeitem on click function outside scope of additem on click function and it will work fine:

$(document).ready(function(){
  $(".additem").on("click", function(){
    var val = $("input").val();
    if(val!=="") {
      var elem = $("<li></li>").text(val);
      $(".list-item").append(elem);
      $("input").val("");     
    }
  });
  $(".removeitem").on("click", function() {
        $(".list-item li:last-child").remove();
  });
});

Remove the last element in ul based on certain condition

you can iterate over the li and check if there is an input next to it, if not then hide it. something like this:

$('#q li').each(function(){if(!$(this).next('input').length)    $(this).hide();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul id="q"><li><a class="PageNumber" data-href="home.htm">1</a></li><input type="hidden" value="1" class="page" /><li><a class="PageNumber" data-href="home.htm">2</a></li><input type="hidden" value="2" class="page" /><li><a class="PageNumber" data-href="home.htm">3</a></li></ul>

Remove last child li

With your current setup, you could set height of the :before line equal to 100% - li height . Or the last li height. This is not very responsive but without knowing what you really have in your project, this is the best ( imo ) solution.

Also you have margin-bottom: 10px 0 . That is not correct. I changed it to margin-bottom: 10px;

/* Timeline Changelogs */ul.timeline {    list-style-type: none;    position: relative}ul.timeline:before {    content: '';    background: #d4d9df;    display: inline-block;    position: absolute;    left: 31px;    width: 2px;    height: calc(100% - 52px);    z-index: 400}
ul.timeline > li {    margin-bottom: 10px;    padding-left: 10px}ul.timeline > li:not(:last-child):after {    content: '';    background: white;    display: inline-block;    position: absolute;    border-radius: 50%;    border: 2px solid #22c0e8;    left: 20px;    width: 20px;    height: 20px;    z-index: 400}

<div class="col-12">  <ul class="timeline">    <li>      <p><b>20 Sept 2018</b></p>      <p>This is 20 Sept 2018</p>    </li>    <li>      <p><b>17 Sept 2018</b></p>      <p>This is 17 Sept 2018</p>    </li>    <li>      <p><b>11 Sept 2018</b></p>      <p>This is 11 Sept 2018</p>    </li>    <li>      <p><b>8 Sept 2018</b></p>      <p>This is 8 Sept 2018</p>    </li>  </ul></div>

remove all li from ul?

If you are using jQuery, why don't you use it's benefits?

adding <li> elements:

$("<li><img src='"+path[i]+"'></li>").appendTo(root);

removing all <li> elements:

$(root).empty();

deleting one <li> element:

$("li:eq(3)",$(root)).remove();

and if you are using raw js, you can use:

document.getElementById("root").innerHTML = "";

Removing last child in list

Why not just hide it, using CSS rule should work in all case:

.SideCategoryListFlyout ul.sf-menu > li:last-child {
   display:none;
}

How to remove all li elements inside an ul except the first and the last elements using jQuery?

To remove from all ul-s on the page the li-s that are neither the first nor the last:

$('ul li:not(:first-child):not(:last-child)').remove();

Or using a specific id:

$('#yourul li:not(:first-child):not(:last-child)').remove();

If you have a jQuery object with your ul in it:

$(yourul).find('li:not(:first-child):not(:last-child)').remove();

Find the deepest and the last li in any li blocks in a ul li list using jquery?

Use while to keep looking for a descending ul and when it can find no more, select the last list item within and apply CSS:

$('.liclk').click(function(){
    var $current = $(this).find('ul'),
        $desc = $current;
    while($desc.length){
        $current = $desc;
        $desc = $current.find('ul');
    }
    $current.find('li').last().css('background-color' ,'red')
});

JSFiddle

---

Related Topics