How to get the first parsed paragraph of wikipedia

This is the js I am using:

function onSuccess(data){
      var markupt = data.parse.text["*"];
      $('#usp-custom-4').val(markupt);
      console.log(markupt);
      var blurbt = $('<div></div>').html(markupt);
      blurbt.find(".mw-editsection, #toc, .noprint, .thumb, img, table").remove();
      // remove links as they will not work
      blurbt.find('a').each(function() { $(this).replaceWith($(this).html()); });
      // remove any references
      blurbt.find('sup').remove();
      // remove cite error
      blurbt.find('.mw-ext-cite-error').remove();
      var pOnly  = $(blurbt).find('p').text();
    }

    function firstWiki() {
      var titolo = $("#headingWiki_0 h3 span").text();
      $.ajax({
        url: "https://it.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0",
        page: titolo,
        dataType: "jsonp",
        jsonpCallback: "onSuccess"
      });
    }

And the html

<div id="headingWiki_0"><h3><span>Roman empire</span></h3></div>
<button id="wiki">Load</button>
<textarea id="usp-custom-4"></textarea>

Here it is a jsFiddle

I am getting no content into the textarea at all

There were a few adjustments I made to the code and I got it to work (you can see the new fiddle below.

I added the page parameter to the URL. It wasn't added so far so your initial fiddle was getting an error response from Wikipedia. This meant that there was no article text to work with in the first place. I also uri-encoded it.
I changed the way that the JsonP callback was being specified. jQuery was correctly adding the callback parameter to the URL and the Wikipedia result was correctly returning a call to it, but it wouldn't get executed. Using callback=? and letting jQuery handle the callback by using the success option did the trick.
I switched Roman Empire for Impero romano, which is the article that you'll find in the IT version of Wikipedia.
I switched val for text. In the case of textareas, they don't hold value as other inputs, but rather text content. I know, inconsistent.

$("#wiki").on("click", function(){
	firstWiki();
});


function onSuccess(data){
      var markupt = data.parse.text["*"];
      $('#usp-custom-4').text(markupt);
      console.log(markupt);
      var blurbt = $('<div></div>').html(markupt);
      blurbt.find(".mw-editsection, #toc, .noprint, .thumb, img, table").remove();
      // remove links as they will not work
      blurbt.find('a').each(function() { $(this).replaceWith($(this).html()); });
      // remove any references
      blurbt.find('sup').remove();
      // remove cite error
      blurbt.find('.mw-ext-cite-error').remove();
      var pOnly  = $(blurbt).find('p').text();
}

function firstWiki() {
  var titolo = $("#headingWiki_0 h3 span").text();
  titolo = encodeURIComponent(titolo);
  $.ajax({
    url: "https://it.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=" + titolo + "&callback=?",
    contentType: "application/json; charset=utf-8",
    dataType: "jsonp",
    success: onSuccess
  });
}

textarea {
  width: 100%;
  height: 200px;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  background: #999;
  display: inline-block;
  padding: 0;
}

input[type=checkbox]:checked + label {
  border: 10px solid grey;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="headingWiki_0"><h3><span>Impero romano</span></h3></div>
<button id="wiki">
Load
</button>
<textarea id="usp-custom-4"></textarea>