Use JQuery to select value of span in an li when a button is clicked

Question

I have a foreach loop that displays a list of To-do items that it gets from a database I've created. Here's how I do that:

<ul class="todo-list">
    <?php foreach($todos as $todo) { ?>
        <li class="todo">
            <button class="delete-todo">&times;</button>
            <input type="checkbox" class="toggle-checked">
            <span id="todo-text"><?php echo $todo; ?></span>
        </li>
    <?php } ?>
</ul>

I have an X button that I want to be able to delete the to-do item from that specific li from my database, but I'm having trouble getting the value of what is in the span tag.

Here's some sample JQuery that isn't working right:

$('.delete-todo').on('click', function(e){
    $.ajax({
        type: "POST",
        url: "deleteTodo.php",
        data: {"deleteTodo": $(".todo-text").next().text()},
        async: false,
        success: function(){

        },
        error: function() {

        }
    });
});

What is the best way of getting the value from the span tag? Any help is greatly appreciated!

Edit:

I've now switched it so that each todo has a unique id and I use the id to remove from the database. Thanks for the help!

you should use an id in your database and not the actual text, what if you have two listings for Get Milk? — cmorrissey
– cmorrissey, Commented Aug 25, 2015 at 19:00
Great thanks for the help! I will accept the answer from @Pranav because it did answer my question, but you guys did give me an idea of how to better use id's to do this. Thanks! — Benya16
– Benya16, Commented Aug 25, 2015 at 19:11

Pranav C Balan · Accepted Answer · 2015-08-25 19:02:15Z

2

id should be unique so use class instead

<ul class="todo-list">
    <?php foreach($todos as $todo) { ?>
        <li class="todo">
            <button class="delete-todo">&times;</button>
            <input type="checkbox" class="toggle-checked">
            <span class="todo-text"><?php echo $todo; ?></span>
        </li>
    <?php } ?>
</ul>

Span tag is sibling of button, so you can get it using siblings() selector

$(this).siblings('.todo-text').text()

$('.delete-todo').on('click', function(e) {
  alert($(this).siblings('.todo-text').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="todo-list">
  <li class="todo">
    <button class="delete-todo">&times;</button>
    <input type="checkbox" class="toggle-checked">
    <span class="todo-text">dfdfdf</span>
  </li>
</ul>

answered Aug 25, 2015 at 19:02

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:50:38Z

1

If you are simply asking how to get the value of a span tag usiong jQuery, then this is definitely a duplicate question, as there are many solutions on stack overflow. Here is one of them:

How Do I get the values of span tags

Now, i'll also tell you, what you could do to make sure you are getting the value from the CORRECT span tag is give each one of those span tags a unique id, so maybe change the id of each span tag to something like:

<span id=<?php echo '"todo-text-' . $todo .'"'; ?>>

This is a very dirty way of doing all of this in my opinion, but its a quick solution i guess. The snippet above also assumes your $todo variable is some sort of unique identifier.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Aug 25, 2015 at 19:07

Geoherna

3,6241 gold badge26 silver badges41 bronze badges

Collectives™ on Stack Overflow

Use JQuery to select value of span in an li when a button is clicked

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related