/    Sign up×
Community /Pin to ProfileBookmark

Function to delete selected unorder list

Hello all,

I have a unorder list with nested list( Parent and Children List) something like this:

Category1
Subcat1
Subcat2
Subcat3
Category2
subcat1
subcat2
subcat3
I want to create a delete function where if I click on Edit button all the list elements should get checkbox and then I can select one or multiple checkbox and when I can click on delete button it should delete selected items.

Function:

  • 1. Need two buttons edit and delete.

  • 2. When click on edit, all the list item should show checkbox to select the any particular item.

  • 3. On selecting one or multiple item from list when click on delete button those item should be deleted from list.

  • 4. If I select the parent item e.g. category1 and delete it, then all the child items(subcat) should also be deleted.
  • Please help!!!

    to post a comment
    CSSHTMLJavaScript

    9 Comments(s)

    Copy linkTweet thisAlerts:
    @daveyerwinJun 17.2019 — if you will supply the HTML I will

    help with the script
    Copy linkTweet thisAlerts:
    @daveyerwinJun 18.2019 — ``<i>
    </i>&lt;!DOCTYPE html&gt;
    &lt;div id=list&gt;
    &lt;ul&gt;
    &lt;li&gt;Category1
    &lt;ul&gt;
    &lt;li&gt;subcat1&lt;/li&gt;
    &lt;li&gt;subcat2&lt;/li&gt;
    &lt;li&gt;subcat3&lt;/li&gt;
    &lt;/ul&gt;&lt;/li&gt;
    &lt;li&gt;Category2
    &lt;ul&gt;
    &lt;li&gt;subcat1&lt;/li&gt;
    &lt;li&gt;subcat2&lt;/li&gt;
    &lt;li&gt;subcat3&lt;/li&gt;
    &lt;/ul&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;button&gt;edit&lt;/button&gt;&lt;button&gt;delete&lt;/button&gt;&lt;button&gt;cancel&lt;/button&gt;
    &lt;/div&gt;
    &lt;script&gt;
    if(!NodeList.prototype.forEach)NodeList.prototype.forEach = Array.prototype.forEach;
    (function(){
    liNodeList = list.querySelectorAll('li');
    var functions = [];
    functions['edit']=function (){
    liNodeList.forEach(function(item){
    var cb = document.createElement('input');
    cb.type = 'checkbox';
    item.insertBefore(cb, item.children[0]);
    }
    )}
    functions['delete']=function (){
    liNodeList.forEach(function(item){
    if(item.children[0].checked){
    el = item.children[1];
    if(el == '[object HTMLUListElement]'){
    el.parentNode.removeChild(el)
    }else{
    item.parentNode.removeChild(item);
    }
    functions['cancel']();
    }
    }
    )}
    functions['cancel']=function (){
    liNodeList.forEach(function(item){
    item.removeChild(item.children[0]);
    })
    }
    buNodeList = list.querySelectorAll('button');
    buNodeList.forEach(function(item){
    item.onclick=functions[item.firstChild.textContent];
    })
    }());
    &lt;/script&gt;<i>
    </i>
    ``
    Copy linkTweet thisAlerts:
    @Abhinav625authorJun 18.2019 — @DaveyErwin#1604911 Hey man, really appreciate your help on this. I tried this code and encountered below issues:
  • 1. When I click on edit button, it should replace a list bullet with checkbox on left hand side. Here it is creating separate checkbox at end of each list item.

  • 2. If I keep on clicking edit button, the checkbox are keep on adding.

  • 3. When I delete any selected item, it doesn't make changes to actual HTML code, because whenever I refresh the page, all the deleted items reappears. On delete it should remove the item permanently.

  • 4. I am planning to have save button instead of cancel. So whenever I add or remove any item, I can use save button to make it permanent change.


  • Really sorry but I have no knowledge of Java and PhP, just basic understanding of HTML and CSS. Hence asking you from scratch. It will be grateful, if you could help me with this.
    Copy linkTweet thisAlerts:
    @daveyerwinJun 18.2019 — this won't work in ie or edge on local file system

    it will work from a server https://www.handgunsforhomeless.com/Abhinav625/

    works on local file system with firefox and with chrome
    ``<i>
    </i>&lt;!DOCTYPE html&gt;
    &lt;div id=list&gt;
    &lt;ul&gt;&lt;li&gt;Category1
    &lt;ul&gt;
    &lt;li&gt;subcat1&lt;/li&gt;
    &lt;li&gt;subcat2&lt;/li&gt;
    &lt;li&gt;subcat3&lt;/li&gt;
    &lt;/ul&gt;&lt;/li&gt;
    &lt;li&gt;Category2
    &lt;ul&gt;
    &lt;li&gt;subcat1&lt;/li&gt;
    &lt;li&gt;subcat2&lt;/li&gt;
    &lt;li&gt;subcat3&lt;/li&gt;
    &lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;
    &lt;button&gt;edit&lt;/button&gt;&lt;button&gt;delete&lt;/button&gt;&lt;button&gt;cancel&lt;/button&gt;&lt;button&gt;reset&lt;/button&gt;
    &lt;/div&gt;
    &lt;script&gt;
    (function(){
    if(window.localStorage.getItem('final1')){
    list.innerHTML=window.localStorage.getItem('final1');}
    doit();})();
    if(!NodeList.prototype.forEach)NodeList.prototype.forEach = Array.prototype.forEach;
    function doit(){
    var active = false;
    liNodeList = list.querySelectorAll('li');
    ulNodeList = list.querySelectorAll('ul');
    var functions = [];
    functions['edit']=function (){
    if(!active){
    ulNodeList.forEach(function(item){item.style.listStyle=" outside none none"});
    active = !active;
    liNodeList.forEach(function(item){
    var cb = document.createElement('input');
    cb.type = 'checkbox';
    item.insertBefore(cb, item.childNodes[0]);})}}
    functions['delete']=function (){
    if(active){ <br/>
    liNodeList.forEach(function(item){
    if(item.childNodes[0].checked){
    el = item.children[1];
    if(el == '[object HTMLUListElement]'){el.parentNode.removeChild(el)}
    else {item.parentNode.removeChild(item)}}});
    functions['cancel']()}}
    functions['cancel']=function (){
    if(active){
    liNodeList.forEach(function(item){
    item.removeChild(item.childNodes[0])})
    ulNodeList.forEach(function(item){item.style.listStyle=""});
    active = !active;
    window.localStorage.setItem('final1', list.innerHTML)}}
    functions['reset']=function (){
    window.localStorage.setItem('final1','');
    document.location.reload()}
    buNodeList = list.querySelectorAll('button');
    buNodeList.forEach(function(item){
    item.onclick=functions[item.firstChild.textContent]})};
    &lt;/script&gt;
    `
    Copy linkTweet thisAlerts:
    @Abhinav625authorJun 19.2019 — @DaveyErwin#1605009 That is exactly what I was looking for. Thank you so much.

    I am trying to add below code to over existing code for delete buttons but no luck. How we can add this to our code?

    HTML:

    &lt;a href="http://nasa.gov" class="delete-confirm btn btn-primary"&gt;Go!&lt;/a&gt;

    JavaScript:
    ``<i>
    </i>(function($){
    $.fn.extend({
    deleteConfirm: function(options)
    {
    var defaults =
    {
    heading: "Please confirm",
    body: 'Are you sure you wish to perform this action?',
    ok_text: 'Proceed',
    cancel_text: 'Back',
    log: false
    };

    options = $.extend(defaults,options);

    $('body').append('&lt;div class="modal fade" id="bs-delete-confirm" tabindex="-1" role="dialog" aria-labelledby="bs-delete-confirm-label" aria-hidden="true"&gt;&lt;div class="modal-dialog"&gt;&lt;div class="modal-content"&gt;&lt;div class="modal-header"&gt;&lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;&lt;h4 class="modal-title" id="bs-delete-confirm-label"&gt;Please confirm&lt;/h4&gt;&lt;/div&gt;&lt;div id="bs-delete-confirm-body" class="modal-body"&gt;&lt;/div&gt;&lt;div class="modal-footer"&gt;&lt;a id="bs-delete-confirm-cancel" class="btn btn-default" data-dismiss="modal" aria-hidden="true"&gt;&lt;/a&gt;&lt;a id="bs-delete-confirm-ok" class="btn btn-primary"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');

    $('#bs-delete-confirm-label').html(options.heading);
    $('#bs-delete-confirm-body').html(options.body);
    $('#bs-delete-confirm-cancel').html(options.cancel_text);
    $('#bs-delete-confirm-ok').html(options.ok_text);

    this.each(function() {
    $(this).on('click',function(e){
    e.preventDefault();
    link = $(this).prop('href');
    $('#bs-delete-confirm-ok').prop('href',link);
    $('#bs-delete-confirm').modal();
    if(options.log == true){
    console.log('Clicked link = ' + link);
    }
    });
    });
    }
    });
    })(jQuery);

    $(document).ready(function(){
    $('.delete-confirm').deleteConfirm();
    });<i>
    </i>
    ``
    Copy linkTweet thisAlerts:
    @Abhinav625authorJun 20.2019 — Can anyone please help me..!!
    Copy linkTweet thisAlerts:
    @daveyerwinJun 20.2019 — https://www.handgunsforhomeless.com/Abhinav625/

    I added a confirm / undo option to code

    when you access the page start by clicking

    the reset button

    this will clear away the old code that is

    retained in your browser so you can start

    fresh with new code

    I could be a lot more help to you if I

    understood your goal.

    What exactly is the purpose of your

    project.

    Who will use this page?

    How will this page benefit the users?
    Copy linkTweet thisAlerts:
    @Abhinav625authorJun 20.2019 — @DaveyErwin#1605148

    Let me tell you the purpose here. My project has many security devices and tools which is use for analysis and troubleshooting. For each device and tools we have different work instructions, SOPs and other technical documents and we have kept it on microsoft sharepoint. So this html page will be act as a index for all those document on sharepoint. It will have list of all the documents with hyperlink. Now the simple list will be static and can not be update later on since no one in the team has coding knowledge. This html file will be either store on sharepoint or on everyone's pc and will not be hosted on any public server. Keeping in mind that in future many documents will be added, modify and will be removed, the html needs to be dynamic with options like add, delete and modify.

    So my idea was to have single edit button and once we click on edit we will be shown Add, delete, modify and save buttons.

    **Add:** On clicking add button, it will prompt to enter document title and its URL and drop down option to select whether we want to add it above or below selected item.

    **Delete:** To delete selected item with confirmation pop-up.

    **Modify:** To modify the title or URL of existing field.

    **Save:** To confirm the changes done.

    If the same thing can be achieve in any other way, I am open to ideas. Objective here is any one should be able to work with the html index without editing the code.
    Copy linkTweet thisAlerts:
    @Abhinav625authorJun 21.2019 — @DaveyErwin#1605148

    Any thoughts on this?
    ×

    Success!

    Help @Abhinav625 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 3.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...