CODEWITHSUNDEEP
javascriptjqueryhtmlappend
bigdowg
bigdowg

Reputation: 409

how to combine list items with buttons using jquery appendTo()?

as of right now i have my list item and my button underneath it, i want my button right next to the next of the list item. I tried using the name = but it just outputs the string version of the html for the button rather than the actual html button itself

  function addCheckbox(name, id) {
     var container = $('#sortable');
     var items = container.find('li');
    //name = name+ '<button type="button" id = "delete" value="delete">Delete</button>';
     $('<li /> ', { 'id': 'cb_'+id, text:''+ name }).appendTo(container);
     $('<button> ', { 'id': 'delete', value:'delete' , text:'delete' }).appendTo(container);
   }

Upvotes: 1

Views: 62

Answers (1)

epascarello
epascarello

Reputation: 207527

Append the button to the li

var li = $('<li /> ', { 'id': 'cb_'+id, text:''+ name });
li.appendTo(container);
$('<button> ', { 'id': 'delete', value:'delete' , text:'delete' }).appendTo(li);

Also if you are having more than one delete button, you need to make the id of the delete button unique. Use a classname that is common and just listen for the click event.

$(container.on("click", "button.deleteClass", function () {
    console.log(this);
    //$(this).closest("li").remove();
});

Upvotes: 1

Related Questions