how to run another JavaScript function when sweet alert script is running

Question

I want to implement javascript function to delete confirmation. After clicking ok button of confirmation alert table tr should be removed from front end. I have used $("#confirm-btn-alert").click(function() for confirmation alert which is in sweet-alert-script.js and function SomeDeleteRowFunction(o) which is in newfile.html for remove tr

sweet-alert-script.js

$(document).ready(function(){
    $("#confirm-btn-alert").click(function(){

        swal({
            title: "Are you sure?",
            text: "Once deleted, you will not be able to recover this imaginary file!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {
                swal("Poof! Your imaginary file has been deleted!", {
                    icon: "success",
                });
            } else {
                swal("Your imaginary file is safe!");
            }
        });

    });

});

newfile.html

<script>
    function SomeDeleteRowFunction(o) {
        var p=o.parentNode.parentNode;
        p.parentNode.removeChild(p);
    }
</script>

Welcome to Stackoverflow. You have stated what you are trying to achieve. Now we need to know, what error or problem you are facing. — Marco
– Marco, Commented Jan 2, 2019 at 8:37
@Marco i am not getting a error... but i want to know how can i connect thsese two functions to delete the row when clicking ok button of confirmation message. — User_1000
– User_1000, Commented Jan 2, 2019 at 8:47
Probably nothing to do with your specific issue, but your closing script tag is missing a > sign — Matt
– Matt, Commented Jan 2, 2019 at 8:51
@M̨̹̖̱̠̭̠̱̘͌̓ͬͫa̧͔͇̗͖͖͑ͭ͝t̆͗̊ͫt It is copy paste mistake.. — User_1000
– User_1000, Commented Jan 2, 2019 at 8:55

Aria · Accepted Answer · 2019-01-02 11:30:13Z

1

It is just enough to find that table and tr in confirmation of alert based on information here, if the user clicks the confirm button, the promise resolves to true. If the alert is dismissed (by clicking outside of it), the promise resolves to null, so if willDelete be true in if (willDelete) condition it means user confirm it and you can delete what you want.

I provide two sample working code snipped to help as below:

$(document).ready(function(){
    function SomeDeleteRowFunction(table,child) { 
        table.find(child).remove();
        // you can also play with table and child (child is tr)
    }
    $(".delete").click(function(){ 
        swal({
            title: "Are you sure?",
            text: "Once deleted, you will not be able to recover this imaginary file!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {
                var $tbl = $(this).closest('table');
                var $tr = $(this).closest('tr'); 
                SomeDeleteRowFunction($tbl,$tr);
                swal("Poof! Your imaginary file has been deleted!", {
                    icon: "success",
                });
            } else {
                swal("Your imaginary file is safe!");
            }
        });

    });
   $("#confirm-btn-alert").click(function(){ 
        swal({
            title: "Are you sure?",
            text: "Once deleted, you will not be able to recover this imaginary file!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {
                var $tbl = $('#tbl2');
                var $tr = $('#tr1'); 
                SomeDeleteRowFunction($tbl,$tr);
                swal("Poof! Your imaginary file has been deleted!", {
                    icon: "success",
                });
            } else {
                swal("Your imaginary file is safe!");
            }
        });

    });
});

<script src="https://sweetalert.js.org/assets/sweetalert/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>first td</td> 
    <td>second td</td>
    <td>TR1 content <button class="delete">Remove</button></td>
  </tr>
  <tr>
    <td>TR2 content<button class="delete">Remove</button></td>
  </tr>
  <tr>
    <td>TR3 content<button class="delete">Remove</button></td>
  </tr>
</table>
<hr/>
<table id="tbl2">
  <tr id="tr1">
    <td>Table 2 TR1 content</td>
  </tr>
  <tr id="tr2">
    <td>Table 2 TR2 content</td>
  </tr>
  <tr id="tr3">
    <td>Table 2 TR3 content</td>
  </tr>
</table>
<button id="confirm-btn-alert">Remove</button>

edited Jan 2, 2019 at 11:30

answered Jan 2, 2019 at 9:53

Aria

3,8541 gold badge28 silver badges55 bronze badges

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

3 Comments

User_1000 Over a year ago

Thank you very much for your great response... But when i add several <td>s to table then they are not deleted....` <tr> <td>first td</td><td>second td</td> <td>TR1 content <button class="delete">Remove</button></td> </tr>`

Aria Over a year ago

because $(this).parent() get the td which is parent of clicked button there are some ways to get tr, use $(this).closest('tr') or $(this).parent().parent() or etc, see the update.

Aria Over a year ago

please don't use this answer for tests purpose, copy the code in your local compute or use JSFiddle, anyway if the answer helps you please accept it as answer by the check mark icon in top left of answer.

smilyface · Accepted Answer · 2019-01-02 09:24:50Z

1

You can try the same method you used to click the confirm button !
Change the <script> function with the below content

$(document).ready(function(){
    $("#ok-button-id").click(function(o){
        var p=o.parentNode.parentNode;
        p.parentNode.removeChild(p);
    })
});

Or if the <tr> has an ID, it's so easy for you.
<tr id="myTableRow"><td>Confirmation message here</td></tr>

$(document).ready(function(){
    $("#ok-button-id").click(function(){
         $('#myTableRow').remove();
    })
});

Here is another way

 $(document).ready(function(){
    $('#myTableID tr').click(function(){ //Here 'this' will be the table row
        $(this).remove();
        return false;
    })
});

edited Jan 2, 2019 at 9:24

answered Jan 2, 2019 at 9:19

smilyface

5,56111 gold badges44 silver badges60 bronze badges

Collectives™ on Stack Overflow

how to run another JavaScript function when sweet alert script is running

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related