What i need is the ability to have an X either a text link, or button, I'm to remove an item from the sortable list. How do I write a function to do so within this code?

$(function() {
    $("#sortable").sortable({
        placeholder: "ui-state-musichighlight"
    });
});

<ul id="sortable">
    <li class="ui-state-musicdefault">
        <a class="delete" href="#">X</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="#">X</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="#">X</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>
</ul>

update

Still not working, but it does on JSfiddle...Help?

<script src=".1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#sortable").sortable({
 placeholder: "ui-state-musichighlight"
});

$('.delete').click(function(){
   $(this).closest('li').remove();
             //or
   $(this).parent().remove();    
});
 </script>
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}
</style>

<ul id="sortable">
    <li class="ui-state-musicdefault">
        <a class="delete" href="javascript:void(0)">X1</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="javascript:void(0)">X2</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="javascript:void(0)">X3</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>
</ul>

update

I have now fixed it with...

    //<![CDATA[ 
    window.onload=function(){ 

however its not working within my jQuery function...help?

jQuery("#sortable").append('<li class="ui-state-musicdefault"><a class="delete" href="javascript:void(0)">X</a>

What i need is the ability to have an X either a text link, or button, I'm to remove an item from the sortable list. How do I write a function to do so within this code?

$(function() {
    $("#sortable").sortable({
        placeholder: "ui-state-musichighlight"
    });
});

<ul id="sortable">
    <li class="ui-state-musicdefault">
        <a class="delete" href="#">X</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="#">X</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="#">X</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>
</ul>

update

Still not working, but it does on JSfiddle...Help?

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#sortable").sortable({
 placeholder: "ui-state-musichighlight"
});

$('.delete').click(function(){
   $(this).closest('li').remove();
             //or
   $(this).parent().remove();    
});
 </script>
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}
</style>

<ul id="sortable">
    <li class="ui-state-musicdefault">
        <a class="delete" href="javascript:void(0)">X1</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="javascript:void(0)">X2</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>

    <li>
        <a class="delete" href="javascript:void(0)">X3</a>
        <!-- ...lots of form data here, only text input fields... -->
    </li>
</ul>

update

I have now fixed it with...

    //<![CDATA[ 
    window.onload=function(){ 

however its not working within my jQuery function...help?

jQuery("#sortable").append('<li class="ui-state-musicdefault"><a class="delete" href="javascript:void(0)">X</a>

• javascript
• jquery
• html
• jquery-ui

4 Answers 4

$(".delete").click(function(){
$(this).parent().remove();

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Delete me 1<a href="#" class="delete">delete</a></li>
<li>Delete me 2<a href="#" class="delete">delete</a></li>
<li>Delete me 3<a href="#" class="delete">delete</a></li>
<li>Delete me 4<a href="#" class="delete">delete</a></li>
</ul>

http://jsfiddle/25sp6txz/

Listen delegated click on inner .delete elements and remove corresponding li when that happens:

$("#sortable").sortable({
    placeholder: "ui-state-musichighlight"
})
.on('click', '.delete', function() {
    $(this).closest('li').remove();
});

Demo: http://jsfiddle/1htxLzm2/

You can use .closest('li') or .parent() with clicked delete element context along with .remove() to remove them:

$('.delete').click(function(){
   $(this).closest('li').remove();
             //or
   $(this).parent().remove();    
});

Working Demo

You can catch the click on delete class, and remove its parent.

(function(){

    $(document).on('click', '.delete', function(){
        $(this).parent('li').remove();
    }
})();