CODEWITHSUNDEEP
javascriptjqueryhtmllist
tadasajon
tadasajon

Reputation: 14866

JQuery - detach then append an item to a list - why won't this simple example work?

http://jsfiddle.net/jononomo/FGB7j/1/

The HTML:

<ol id="item_list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li id="form_list_item">
    <form action="/add_item/" method="post" id="add_item_form">
      <input type="text" name="newitem" value="" id="newitem"/>
      <input type="submit" value="Add" /> 
    </form>
  </li>
</ol>

The JavaScript:

var frm = $('#add_item_form');
frm.submit(function () {
  console.log('a')
  var form_list_item = $("#form_list_item");
  console.log(form_list_item)
  console.log('b')
  $("#item_list").detach(form_list_item);
  console.log('c')
  $("#item_list").append("<li>new item</li>");
  console.log('d')
  $("#item_list").append(form_list_item);
  console.log('e')
  return false;
});

The console.log:

a
[li#form_list_item, context: document, selector: "#form_list_item", jquery: "1.10.1", constructor: function, init: function…]
b
Uncaught TypeError: Object [object Object] has no method 'replace'

Also, any theory about what is going on what would be appreciated. For instance, I'm able to use jquery to select the #form_list_item, so why not the #item_list right below it?

Upvotes: 2

Views: 3609

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388416

You need to call detach on the element set which has to be detached from the dom, in this case form_list_item.detach()

The detach() takes no or a string as the parameter which is used to filter the set on which detach was called.

var frm = $('#add_item_form');
frm.submit(function () {
    console.log('a')
    var form_list_item = $("#form_list_item");
    console.log('b')
    form_list_item.detach()
    console.log('c')
    $("#item_list").append("<li>new item</li>");
    console.log('d')
    $("#item_list").append(form_list_item);
    console.log('e')
    return false;
});

Demo: Fiddle

Upvotes: 4

Related Questions