1

my data looks like:

["<span id="srt-46-srt" class="ui-icon ui-icon-arrowthick-2-n-s"></span>0 || Orange", "<span id="srt-62-srt" class="ui-icon ui-icon-arrowthick-2-n-s"></span>1 || Mango", "<span id="srt-1-srt" class="ui-icon ui-icon-arrowthick-2-n-s"></span>2 || Apple"]

Has someone an advice on how to delete the entire span (including content)

$( "button" ).button().on( "click", function() {

  var data = [];

  $( "#sortable li" ).each(function() {
    data.push( this.innerHTML );
  });

  $("#span").each(function(){
    data.remove();
  });

  console.log(data);
  jQuery.post(href="[% request.uri_base %]/api/sort", {data: data} , function(data){
  });

  return false;
});
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
user1037763
  • 131
  • 1
  • 9
  • 1
    Your data **Array** seems invalid since you have unescaped quotes – Roko C. Buljan Oct 18 '16 at 01:54
  • ? For every span is a `"` and after every fruit is a `"`. Anyway, it is basically just a string. I remain puzzled. – user1037763 Oct 18 '16 at 02:00
  • 1
    ya `"` at the beginning, at the end, and in between and all over the place. Which makes it an invalid Array. Also, try to create a [mcve]. Could help in answering your question. – Roko C. Buljan Oct 18 '16 at 02:06
  • Thanks for your reply, my data is basically derived from a set of `li` elements that after manually sorting create this `string`. A single line looks like `["0 || Orange"` It works and I currently strip everything except `0 || Orange` away at the server but thought it would be better if I were to receive a correct JSON string there. – user1037763 Oct 18 '16 at 02:26

1 Answers1

1

So you basically want to: get into Array the LI's text ignoring the SPAN elements

[ "0 || Orange", "1 || Mango", "2 || Apple" ]

Here's an example that uses .ignore() (though it might not be needed in your specific case since your span don't have any actual content and you could simply go for .text()...)
The Array of contents is than created using .map() over the LI's .text() - but ignoring the span elements:

// https://stackoverflow.com/a/11348383/383904
$.fn.ignore = function(sel){
  return this.clone().find(sel||">*").remove().end();
};



$("button").on("click", function(event) {

  event.preventDefault();

  var data = $("#sortable li").ignore("span").map(function(){
    return $(this).text();
  }).get();

  // Now Send your `data` Array to server
  console.log(data);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>GET DATA</button>

<ul id="sortable">
  <li><span id="srt-46-srt" class="ui-icon ui-icon-arrowthick-2-n-s">Some SPAN ICO 1</span>0 || Orange</li>
  <li><span id="srt-62-srt" class="ui-icon ui-icon-arrowthick-2-n-s">Some SPAN ICO 2</span>1 || Mango</li>
  <li><span id="srt-1-srt"  class="ui-icon ui-icon-arrowthick-2-n-s">Some SPAN ICO 3</span>2 || Apple</li>
</ul>
Community
  • 1
  • 1
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313