How can I remove items from div?

Question

0.00/5 (No votes)

See more:

I am working on MVC5 Project, there I am dynamically creating html.

Using jquery,

JavaScript

$("#divbindProjectlist").append('<a href="#" class="list-group-item projectList" ><span class="project-name">' + json.ProjectName + '<input type="hidden" value="' + json.idPartnerProject + '" /></span><i class="pull-right close-p">x</i></a>');

View,

HTML

<div id="divbindProjectlist" class="left-top-p">
    <a class="list-group-item active left-menu-head">Projects List</a>
    <a href="#" class="list-group-item projectList">
        <span class="project-name">ssssssss</span><i class="pull-right close-p">x</i>
        <input type="hidden" class="hidprojectId" value="0.37421775864182916">
    </a>
    <a href="#" class="list-group-item projectList">
        <span class="project-name">asdfasdf</span><i class="pull-right close-p">x</i>
        <input type="hidden" class="hidprojectId" value="0.6032844290071158">
    </a>
    <a href="#" class="list-group-item projectList">
        <span class="project-name">asdfasdf</span><i class="pull-right close-p">x</i>
        <input type="hidden" class="hidprojectId" value="0.28981124419382853">
    </a>
</div>

What I have tried:

Now, How can I remove the each 'a' element when click on x ?

I have tried this. But not working.

JavaScript

$(document).on("click", ".close-p", function () {
       $(this).parentsUntil(".list-group-item.projectList").remove();
   });

Posted 10-May-17 20:56pm

Member 12955507

Updated 11-May-17 1:55am

Richard Deeming

v2

Add a Solution

2 solutions

Solution 1

If you are creating html dynamically then its better to give a id to inner content and delete that content by the help of that id. On every delete button append a jquery function (Delete(youdd)) and remove the content on basic of that id.

Ex:

function Delete(id) {
$("#"+id).remove(); //
}

Posted 11-May-17 1:54am

Ramesh Kumar Barik

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2017-05-11T01:55:00

Solution 2

Try:

JavaScript

$(document).on("click", ".close-p", function (evt) {
    evt.preventDefault();
    $(this).closest(".list-group-item.projectList").remove();
});

Demo[^]

Posted 11-May-17 1:55am

Richard Deeming

Comments

Member 12955507 11-May-17 8:00am

Thank god! Respected Sir, You have saved me... thank a lot...