Удалить элементы DOM с помощью JQuery

Question

У меня есть HTML, как показано ниже. Я хочу удалить поле ввода, а также кнопку изображения при нажатии.

<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> 

В теге "ul" также отображается изображение и поле ввода. Я пишу Jquery, как показано ниже, но только поле ввода удаляется, изображение все еще остается. Мне нужна помощь по выбору элементов DOM с помощью jQuery и вызова метода remove().

$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(); 
}; 

Answer 1

Вы можете удалить элемент из массива mission.missioncontent в scope, который также будет обновлять view с помощью splice метода.

См изменения выделены в коде:

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 
}; 

Answer 2

Как ответил @Tushar, вам нужно обернуть свой код в DOM готовый мероприятие.

Вы можете попробовать это!

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

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

См Мои jsFiddle - http://jsfiddle.net/ks6mo5ex/

или попробовать это - http://jsfiddle.net/ks6mo5ex/1

Answer 3

Вы должны удалить document.ready, это обработчик события для DOM, который вызывается, когда DOM завершения загрузки в вашем методе ниже DOM уже загружен, поэтому событие не будет выполнено.

Попробуйте

$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(); 
};