如何在单击按钮时从ul中解包所有li

Question

This is probably a dummy question. I am trying to export the contents of a unordered list into a text area and remove the list item on export. I have achieved it at some degree but it only brings in the first list item. How can I export all the li's?

HTML :

 <div class="wrapper">
    <button id="exportBtn">Export</button>
    <div class="container">
        <ul class="structure">
            <li>Something</li>
            <li>Something else</li>
        </ul>
    </div>
    <div class="text">
        <textarea id="exportTxt" contenteditable style=""></textarea> 
    </div>
</div>

This is my script :

$(function() {
  $( "#exportBtn" ).click(function() {
    var htmlString = $('.structure li').html();

    $('textarea#exportTxt').html(htmlString).parent().is( 'li' ).htmlString.unwrap();
    $('textarea#exportTxt').addClass('slideIn');
  });
});

Answer 1

View working demo

So you want it to read SomethingSomething else .

$(function() {
  $( "#exportBtn" ).click(function() {
      var html = ''; // start with empty
      $('.structure li').each(function(){
          html += $(this).html(); // append the html from each li
          $(this).remove(); // remove the li
      });
      $('#exportTxt').val(html); // set it in the textarea
  });
});

Answer 2

Try this:

js

$("#exportBtn").click(function() {
    var list="";
    $(".structure").children().each(function(){
        list +=$(this).html() + " ";
    });
    $('textarea#exportTxt').val(list);
});

fiddle

Answer 3

Here is a jsfiddle with a working demo: http://jsfiddle.net/Grimbode/PucV2/ Hope this is what you wanted.

js:

  $( "#exportBtn" ).on('click', function() {
      $('.structure li').each(function(){
          var txt = $('#exportTxt').text();
          $('#exportTxt').empty();
          $('#exportTxt').text(txt + ' ' + $(this).text());
          $(this).remove();
      });
  });

html:

<ul class="structure">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<button id="exportBtn">Export</button>
<textarea id="exportTxt"></textarea>