Skip to main content
WolfShade
Legend
May 29, 2018
Question

jQuery 3: get sibling of a parent

  • May 29, 2018
  • 1 reply
  • 647 views

Hello, all,

Trying to get the sibling of a parent, and keep getting a "not defined" message.

<span><button type="button" class="delBtn">DELETE</button></span>

<span>Results</span>

...

$('.delBtn').click(function(){

     $.post("components/APP.cfc?method=deleteUser",{user_id: "{a users id}"}).done(function(data){

                                                                              alert($(this).parent().siblings().length); // Always reports length of zero

                                                                              });

     });

I do not see where I am going wrong, here.  Please help.

V/r,

^ _ ^

    This topic has been closed for replies.

    1 reply

    Legend
    May 30, 2018

    Looks to me as though you're trying to do someting like below?

    <div class="delete">

    <button class="delBtn">Delete</button>

    <p>Sibling 1</p>

    <p>Sibling 2</p>

    <p>Sibling 3</p>

    <p>Sibling 4</p>

    </div>

    <!-- end delete -->

    <div class="response"></div>

    JQuery:

    $(document).ready(function(){

    $(".delBtn").click(function(){

    var count = $(this).parent().children().length-1;

    alert(count);

    $.post({

    url: "get_info.php",

    data: {count: count},

    success: function(response){

    $(".response").html(response);

    }

    });

    });

    });

    get_info.php: (I know you use CF but it will give you an idea.

    <?php

    $count = $_POST['count'];

    echo $count;

    ?>

    Just to clarify a 'sibling' is an element that FOLLOWS, NOT one which is INCLUDED, that's a child/children. So asking to return the number of siblings in a parent isnt going to work as they are children.

    WolfShade
    WolfShadeAuthor
    Legend
    May 30, 2018

    osgood_  wrote

    Looks to me as though you're trying to do someting like below?

    No.  If you take a closer look at my pseudo-code, there are two spans that are siblings.  The first one contains a button that when clicked is supposed to delete a user from a database.  The second one will display the returned results from the function that deletes the user.

    I can't use ID for this because there will be more than one, and it's dynamically created.  That's why I'm trying to go the parent/sibling route.  My logic is "click the button, delete the user, and display returned value in sibling of parent of button clicked."  But I don't see where I've gone agley.

    V/r,

    ^ _ ^

    Legend
    May 30, 2018

    WolfShade  wrote

    osgood_   wrote

    Looks to me as though you're trying to do someting like below?

    No.  If you take a closer look at my pseudo-code, there are two spans that are siblings.  The first one contains a button that when clicked is supposed to delete a user from a database.  The second one will display the returned results from the function that deletes the user.

    I can't use ID for this because there will be more than one, and it's dynamically created.  That's why I'm trying to go the parent/sibling route.  My logic is "click the button, delete the user, and display returned value in sibling of parent of button clicked."  But I don't see where I've gone agley.

    V/r,

    ^ _ ^

    I dont think you can pass a  $.POST unless you get it back from the coldfusion page dynamically.

    If you call for the length of the siblings outside of the $.POST function youll get your answer back.

    Plus you can use id:

    <button class="delBtn" data-id="<?php echo $row['id']; ?>">Delete</button>

    <button class="delBtn" data-id="<?php echo $row['id']; ?>">Delete</button>

    <button class="delBtn" data-id="<?php echo $row['id']; ?>">Delete</button>

    var id = $(this).attr('data-id');

    Pass the id to the cf page and delete it from the database? Then get the response and pass it back to 'results'? Is that not doable?