/    Sign up×
Community /Pin to ProfileBookmark

Nested List with Edit Option

Hello All,

I am very new to the website development community and not coming from development backgroud. As a part of personal project I want to create a list with edit option.
Example:
List title 1
sublist 1 – hyperlink
sublist 2 – hyperlink
sublist 3 – hyperlink
List title 2
sublist 1
sublist 2
Delete Add Save — buttons

I have list of item which contains subitem, all the subitems are the hyperlinks.
Now I want to create a edit option, where when we click on edit button we should see, ‘Delete’, ‘Add’ and ‘Save’ options.

Delete Button Function:
When we click on edit button, all the item and sub-item should show check box to select the item and when clicking on delete button it should delete the selected item or sub-item.

Add Button Function:
When we click on add button then we should get a pop-up form(php) to add item name and item URL and submit button. When click on submit, it should create a new subitem or item.

Save Button Functionality:
On clicking save button it should prompt do you want to save your changes, yes or no, click on yes it should save the changes.
Please help me with this. Where to look, what should I look for or if anyone can provide any code would be great help.

to post a comment
HTML

6 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJun 15.2019 — Only some hints to start with:

Regarding the edit button: It would be easiest to add all the additional elements, checkbuttons, delete add and save, from the beginning, hide them at first and make them visible when the edit button is pressed.

Regarding the add button:
  • 1. No form needed, simply two inputs for item name and URL and a confirm button.

  • 2. You need to specify where the new entry should be inserted. I assume or recommend above or below the item currently selected. Then one had to verify that only one item is checked.


  • Regarding the save button: Where do you want to save the changes? In a textfile or database on the server? In the localStorage on the user's computer? In a file on the user's computer?
    Copy linkTweet thisAlerts:
    @Abhinav625authorJun 15.2019 — @Sempervivum#1604787 thank your for your tips and quick response.

    Yes you are right, for add button I just need two inputs for name and URL and then should have option to add above or below the selected item.

    Also about the save option, I need to store this on local system in the same folder. This will be for internal use only.

    Can you also let me know what would be the best place to get code for this or may be few samples related to this which I can tweak to get what I want to achieve here.
    Copy linkTweet thisAlerts:
    @SempervivumJun 15.2019 — MDN (Mozilla developer network) is a good resource:

    https://developer.mozilla.org/en-US/

    At first you will need an unordered list <ul>

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

    Then you will need inputs and checkboxes:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

    In order to make the elements interactive you will need event listeners:

    https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
    Copy linkTweet thisAlerts:
    @Abhinav625authorJun 15.2019 — Thank you much man. That's really good stuff to start with. I will go through this and try to implement it. Appreciate your help.

    Any other inputs are always welcome. 😃
    Copy linkTweet thisAlerts:
    @daveyerwinJun 15.2019 — here is somethin I slammed together this mornimg

    https://www.handgunsforhomeless.com/Abhinav625/

    see waht you think

    its a partion solution

    your requested features are easy to add
    Copy linkTweet thisAlerts:
    @Abhinav625authorJun 15.2019 — @DaveyErwin#1604795

    Big thanks to you. This is really helpful for me. Now I have something to work with. Thanks again.
    ×

    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,
    )...