CODEWITHSUNDEEP
css
G.L.P
G.L.P

Reputation: 7217

CSS li with close button

Problem: I need list with close option, the code which i tried sofar is here.

For ex: Suppose I clicked on close button of Test Content1, it should be removed from the list.

It might be simple, but I'm working in this for a long time to find solution with no luck

<ul class="list_sbar"> 
    <li> <a href="#">Test content1</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
    <li> <a href="#">Test content</a>  </li>
</ul>

With the code I showed, I can be able to link whole list block as single link, not able to give separate functionality for close

Note: As you can see in my demo the whole block(not only for text) is considered as single link, where I need different link/tag for close, that's why I mentioned I'm not able to give separate link for close.

Even I'm ready to accept separate class for close, no need for close functionality(JS), I just want different behavior/link for close from li a

I don't want to close the list if its clicked, until I clicked on close button it should not get closed

Upvotes: 1

Views: 3183

Answers (5)

Dmitriy
Dmitriy

Reputation: 4503

variant on css

use pseudo-class :checked with input elements of type radio and checkbox.

ul.list_sbar {    
    overflow: hidden;
    list-style: none;
}
ul.list_sbar li{
    position:relative;
}
ul.list_sbar li > div{
    clear:both;
    border-bottom: solid 1px #ddd;
    min-height:22px;
    line-height: 22px;
    display: block;
    text-decoration: none;
    background: #fff;
    outline: 0;
    font-weight: normal;
    padding: 4px 9px;
}
ul.list_sbar li:first-child {
    border-top: solid 1px #ddd;
}
ul.list_sbar li a {
    text-decoration: none;
    z-index: 33;
    color: #666;
    margin-bottom: 0;
    display:inline-block;
    outline: 0;
    float:left;
}
ul.list_sbar li > div:hover {
    color: #111;
    background: #FFF2BE;
    -moz-box-shadow: inset 0 0 1px #333;
    -webkit-box-shadow: inset 0 0 1px #333;
    box-shadow: inset 0 0 1px #333;
}
ul.list_sbar li input{
    display: none;
}
ul.list_sbar li label:hover{
    color: #f00;
}
ul.list_sbar li label{
    position: absolute; top: 50%;
    line-height: 22px;
    font-size: 18px;
    text-align: right;
    padding-right: 8px;    
    width: 20px;
    height: 100%;
    right: 0;
    color: #999;
    font-family:  calibri, sans-serif; 
    cursor: pointer;    
    transform: translateY(-50%); 
}
ul.list_sbar li input:checked + label + div{
    display: none;
}
<ul class="list_sbar"> 
    <li> 
        <input type="radio" id="r1" name="r1" /><label for="r1">x</label>
        <div><a href="#">Test content1</a></div>
    </li>
    <li> 
        <input type="radio" id="r2" name="r2" /><label for="r2">x</label>
        <div><a href="#">Test content2</a></div>
    </li>
    <li> 
        <input type="radio" id="r3" name="r3" /><label for="r3">x</label>
        <div><a href="#">Test content3</a></div>
    </li>
   <li> 
        <input type="radio" id="r4" name="r4" /><label for="r4">x</label>
        <div><a href="#">Test content4</a></div>
    </li>
    <li> 
        <input type="radio" id="r5" name="r5" /><label for="r5">x</label>
        <div><a href="#">Test content4</a></div>
    </li>
    <li> 
        <input type="radio" id="r6" name="r6" /><label for="r6">x</label>
        <div><a href="#">Test content5</a></div>
    </li>
     <li> 
        <input type="radio" id="r7" name="r7" /><label for="r7">x</label>
        <div><a href="#">Test content6</a></div>
    </li>    
</ul>

I hope this helps

Upvotes: 0

user2226755
user2226755

Reputation: 13223

You can't have javascript event on ::before or ::after.

But you can check the x position of the mouse, like this :

$(".list_sbar li").click(function(e) {
    if ($(this).outerWidth() - 34 <= e.offsetX)
        $(this).remove();
});

See js fiddle : http://jsfiddle.net/pf9j7ry4/

enter image description here

Upvotes: 0

Rey Libutan
Rey Libutan

Reputation: 5314

Do it with events like this.

Please note that I am using jQuery here as I see you didn't include that as a tag in your question.

$(".list_sbar a").click(function() {
    $(this).closest("li").fadeOut(function() {
        $(this).remove();
    });   
});

I updated your example to show this demo.

EDIT: jQuery does not support adding events on pseudoelements (:before, :after)

So what you need to do is redesign your close buttons, make them as actual elements.

Upvotes: 1

Junaid Ahmed
Junaid Ahmed

Reputation: 695

Do this You Will Get Your Desire Result

 $(".list_sbar").on('click','li',function(){
    $(this).fadeOut();

});

Demo is Here http://jsfiddle.net/7evx02zf/5/

Upvotes: 0

stanze
stanze

Reputation: 2480

Try this fiddle.

$('ul li').on('click', function() {
    $(this).remove();
})

Upvotes: 0

Related Questions