I have a series of lists, when a list item is clicked the list is split in two and a paragraph element is inserted in between. This paragraph element is assigned a class based on the index of the list item that was clicked.

I now am trying to remove that paragraph element if the paragraph already exists contains a class the same as clicked item's index.

As far as I know the .is() method is needed to get this working but I'm have trouble trying to get my head around using it to select the paragraph element. It's pretty cumbersome but this is main bit of code I'm having trouble with:

Code JavaScript:
if ($(this).is($(this).parent().parent().children('.'+index))) {
    alert('li already clicked');
}

http://jsfiddle.net/K4b8J/15/

Any help is appreciated.

JS:
Code JavaScript:
$(".category_list.grid li").click(function () {
    var $uls = $(this).parent().parent().children("ul"); 
    var $lis =  $uls.find("li");
    // add second list
    if ($uls.length < 2) {
        var $newUl = $("<ul></ul>").insertAfter($uls);
        $uls = $uls.add($newUl);
    }
 
    var index = $lis.index(this);
    alert(index);
    //calculate how many lis fit per line
	var noPerLine = Math.floor($(".category_list.grid").width()/$(".category_list.grid li").outerWidth(true));
    //find index at end of line to cut
    var cutIndex = (Math.ceil((index+1)/noPerLine)*noPerLine)-1;
    // if last row make index last item
	if (cutIndex > ($lis.length-1)) {
		cutIndex = $lis.length-1;
	}
    alert(cutIndex);
 
 
    var $following = $lis.slice(cutIndex + 1); // get all following `li` elements
 
    // append all li elements up to the current one to the
    // first list
    $uls.eq(0).append($lis.slice(0, cutIndex + 1));
 
    if ($following.length > 0) {
       // append to second list
       $uls.eq(1).append($following);
    } else {
        // remove second list if empty
        $uls.eq(1).remove();
        $uls = $uls.eq(0);
    }
 
    // add a paragraph after the first list
    $('.preview').remove();
    // find if index already clicked
    if ($(this).is($(this).parent().parent().children('.'+index))) {
        alert('li alread clicked');
    }
 
    $('<p />', {'class': 'preview ' + index,text: 'Test'}).insertAfter($uls.eq(0));
 
});

HTML:
Code HTML4Strict:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<div class="category_list grid">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="category_list grid">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="category_list grid">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS:
Code CSS:
*{padding:0;margin:0}
.preview {clear:both; min-height: 10em; background: red;}
ul {clear:both;}
li {
  width: 5em;
  height: 3em;
  background: black;
    display: inline-block;
    text-align: left;
    margin: 1em;
    color: white;
}
.category_list {margin-bottom:2em; clear:both;}