CODEWITHSUNDEEP
javascriptjqueryhtmldom
blue_zinc
blue_zinc

Reputation: 2500

jQuery Trying to access the text within span

<ul class="info">                        
  <li data-edit="string">
    <span class="content">
      Sing Sing
    </span>
    <div class="edit-panel">
      <button data-action="delete">Delete</button>
      <button data-action="edit">Edit</button>
    </div>
  </li>
</ul>

How do I access Sing Sing here when I click the delete button? This is what I'm trying...

$(selector).each(function(){
  var $mainElement = $(this);    
  $mainElement.find("[data-action=delete]").off().on("click", function(){           
    var sing = $(this).parents("[data-edit]").find("#gogo").text($(this).val());             
  });
});

Upvotes: 0

Views: 47

Answers (2)

omikes
omikes

Reputation: 8513

I would just replace selector with ".edit-panel" since that's the div the buttons are in.

to get the text from content, instead of trying to traverse the jquery tree just hit it directly, aka replace

var sing = $(this).parents("[data-edit]").find("#gogo").text($(this).val());

with 

var sing = $(".content").text().trim();

Upvotes: 0

Ritesh Karwa
Ritesh Karwa

Reputation: 2254

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

  <style>
  </style>
</head>
<body>
  <ul class="info">                        
  <li data-edit="string">
  <span class="content">
  Sing Sing
  </span>
  <div class="edit-panel">
          <button data-action="delete">Delete</button>
          <button data-action="edit">Edit</button>
      </div>
  </li>
  </ul>
<script>
 $(document).ready(function(){
   console.log($(".content").text());
  });
</script>

</body>
</html>

Upvotes: 1

Related Questions