CODEWITHSUNDEEP
javascriptjqueryhtmlcss
phamousphil
phamousphil

Reputation: 254

Dynamically add border on div class

In a series of divs containing tables that can be clicked and removed I removed the bottom border to prevent a 'doubled up' border look. However, now I am stumped as to how to add a bottom border but only on whatever element is last/on the bottom.

JSFiddle here: http://jsfiddle.net/phamousphil/t82qsd69/

Javascript code below that handles the disappearing act for the divs. Could I augment that function to help here? 

$(function () {
    var nContainer = $(".notification-popup-container");

    $("a.notification-popup-delete").click(function (e) {
        e.preventDefault();
        $(this).closest(nContainer).remove();
    });
});

Upvotes: 1

Views: 1691

Answers (3)

Gumma Mocciaro
Gumma Mocciaro

Reputation: 1215

if i understood what you mean, just add $('.notification-popup-container:last-child').css('border-bottom', '1px solid red'); inside the click function (below $(this).closest(nContainer).remove();) so when you delete a div, this script check if the last element has the border bottom (it it already has a border the sript will ignore this css rule)

Upvotes: 0

Matt
Matt

Reputation: 5428

At the bottom of your CSS you can add an extra rule that applies to the last item.

.notification-popup-container-main .notification-popup-container:last-child { border-bottom: 1px solid #75C3E0; }

Example: http://jsfiddle.net/t82qsd69/4/

Upvotes: 0

emmanuel
emmanuel

Reputation: 9615

You could use :last-child css selector.

.notification-popup-container:last-child {
    border-style: solid;
    border-width: 2px;
}

Fiddle: http://jsfiddle.net/t82qsd69/3/

Reference: MDN

Upvotes: 4

Related Questions