Delete DOM Elements Using JQuery

Question

I am having the HTML as shown below. I want to delete the input box and also the image button itself when clicked.

<div id="missioncontainer" class="missioncontent">
    <div id="mission-{{mission.id}}" class="contentBox box effectmission" ng-repeat="mission in missions">
        <div class="boxheader">
            <div style="float:right; clear:right; width:20%;">
                <span><a href="" style="" ng-click="deleteMission(mission.id)"><img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a></span>
            </div>
            <span style="font-size: large; font-family: monospace; font-weight: bold;">EDIT MISSION NAME</span>
            <input ng-blur="updatemission(mission.id, mission.missionInfo)" type="text" ng-model="mission.missionInfo" class="form-control" style="background-color: #e8e8e8">
        </div>
        <div style="padding-top: 10px;">
            <span style="font-size: large; font-family: monospace; font-weight: bold; margin-left:5%;">EDIT MISSION POINTS</span>
            <br />
        </div>
        <div style="padding-top: 10px;">
            <ul id="beforeul" style="float: left; width: 100%;">
                <li ng-repeat="missioncontent in mission.missioncontent" style="padding: 2px; width: 100%;">
                    <div style="float:right; clear:right; width:20%;">
                        <span><a href="" style="" ng-click="deletemissionpoints(missioncontent.id, mission.id)"><img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a></span>
                    </div>
                    <div>
                        <input id="{{missioncontent.id}}" type="text" ng-model="missioncontent.info" ng-blur="updatemissionpoints(missioncontent.id, missioncontent.info)" class="form-control" style="background-color: #e8e8e8; width: 80%;">
                    </div>
                </li>
            </ul>
        </div>
        <div style="padding-top: 35px;">
            <a href="" ng-click="addmissionpoint(mission.id)"><img id="addmissionpoint" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"></a>
        </div>
    </div>
</div>

In the "ul" tag, the image and the input box also. I am writing Jquery as shown below, but only input box is getting deleted the image still remains. I need help on selecting the DOM elements using jQuery and calling remove() method on them.

$scope.deletemissionpoints = function(missionpointid, missionid){
    alert(missionpointid +" "+ missionid);
    jsonData.deletePointId.push(missionpointid);
       $("#mission-"+missionid+"").find("li #"+missionpointid+"").remove();
    $("#mission-"+missionid+"").find("#"+missionpointid+"").find("img").remove(); 
};

the DOM property outerHTML might be useful to you. You will have to retrieve the DOM element from Jquery element first. If you are getting an object undefined error then Tushar's answer below will help — Sarfaraaz
– Sarfaraaz, Commented Jun 24, 2015 at 6:47

Tushar · Accepted Answer · 2015-06-24 07:04:41Z

1

You can remove the element from the array mission.missioncontent in scope, which will also update the view using splice method.

See changes highlighted in the code:

HTML

<div style="padding-top: 10px;">
    <ul id="beforeul" style="float: left; width: 100%;">
        <li ng-repeat="missioncontent in mission.missioncontent" style="padding: 2px; width: 100%;">
            <div style="float:right; clear:right; width:20%;">
                <span><a href="" style="" ng-click="deletemissionpoints($index)">
                //                                                      ^^^^^^
                    <img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a>
                </span>
            </div>
            <div>
                <input id="{{missioncontent.id}}" type="text" ng-model="missioncontent.info" ng-blur="updatemissionpoints(missioncontent.id, missioncontent.info)" class="form-control" style="background-color: #e8e8e8; width: 80%;">
            </div>
        </li>
    </ul>
</div>

Javascript

$scope.deletemissionpoints = function(index) {
    jsonData.deletePointId.push(missionpointid);

    $scope.mission.missioncontent.splice(index, 1);
    // Delete from the array
};

edited Jun 24, 2015 at 7:04

answered Jun 24, 2015 at 6:45

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

2 Comments

Tushar Over a year ago

@VikramSinghJadon Please share the complete javascript code

Vikram Singh Jadon Over a year ago

i am calling a function using ng-click when the image is clicked, so i think the DOM is loaded. i have added the full function of JS

Neil Stevens · Accepted Answer · 2015-06-24 06:58:40Z

0

You need to remove document.ready, this is an event handler for the DOM that is fired when the DOM has finished loading, in you method below the DOM has already loaded so the event will not execute.

Try this

$scope.deletemissionpoints = function(missionpointid, missionid){
    alert(missionpointid +" "+ missionid);
    jsonData.deletePointId.push(missionpointid);

   $("#mission-"+missionid+"").find("li #"+missionpointid+"").remove();
   $("#mission-"+missionid+"").find("#"+missionpointid+"").find("img").remove(); 
};

answered Jun 24, 2015 at 6:58

Neil Stevens

3,9547 gold badges45 silver badges75 bronze badges

Comments

Mayur A Muley · Accepted Answer · 2015-06-24 07:17:49Z

0

As answered by @Tushar, you need to wrap your code Into DOM ready event.

You can try this out!

$(document).ready(function() {
    $("#mission-"+missionid+"").find("li #"+missionpointid+"").remove();

    $("#mission-"+missionid+"").find("#"+missionpointid+"").find("img").remove();
});

See My jsFiddle - http://jsfiddle.net/ks6mo5ex/

or try this Out - http://jsfiddle.net/ks6mo5ex/1

edited Jun 24, 2015 at 7:17

answered Jun 24, 2015 at 6:51

Mayur A Muley

611 silver badge12 bronze badges

3 Comments

Mayur A Muley Over a year ago

see my jsfiddle.. I think this is what you want!

tariq Over a year ago

This is not what OP wants.. check the question again.

Mayur A Muley Over a year ago

Bad times! He can then just append a dummy class and delete elements by classNames.. Can try updated fiddle - jsfiddle.net/ks6mo5ex/1

Collectives™ on Stack Overflow

Delete DOM Elements Using JQuery

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related