Click to delete dynamically created element in AngularJS

Question

Currently whatever the user enters in the text box and clicks the button, is being displayed inside anchor tags dynamically (all in new lines).

Textbox and the button (HTML file)-

<input type="text" name="inputText"><br>

<tr>
        <input type="button" value="ADD" ng-click="$ctrl.addtext()">
</tr>

<div id="outputDiv"></div>

JS function-

ctrl.addtext = function () {
    var div = document.getElementById('outputDiv');
    div.innerHTML += "<a href='' style='margin-left:10px'>"+newtext+"</a><br>";
}

Is there a way to add a close/remove button (like an X) at end of the dynamically created anchor tags, that On-click remove those particular rows of only?

Matthew Moran · Accepted Answer · 2018-03-07 22:22:46Z

2

Edit 3

Using a different component syntax:

function scanExceptionComponentCtrl ($scope, $compile) {
  
  var ctrl = this;
  ctrl.addtext = function (e) {
    var newtext = document.listForm.inputText.value
    var outputDiv = $('#outputDiv');
    var newRow = $compile("<a href='' style='margin-left:10px'>"+newtext+" - <span ng-click='$ctrl.removeRow($event)'>X</span></a><br>")($scope);
    newRow.appendTo(outputDiv)
  };

  ctrl.removeRow = function(e) {
    e.preventDefault();
    e.target.parentNode.remove();
  };
  
};

// angular.module('consoleApp', [])
 angular.module('consoleApp',[])
   .component('scanException', {
  templateUrl: 'templateId',
  controller: scanExceptionComponentCtrl
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="consoleApp">
  <scan-exception></scan-exception>  
  
  
  <script type="text/ng-template" id="templateId">
	<form name="listForm">
		<table border="0" cellspacing="0">
			<tr>
				<input type="radio" style="margin-left:10px;" name="checkRadio" value="append" checked><span class="add-file-text" style="font-weight:bold;">Add File to Exception List</span><br>
				<input type="text" style="width:250px;height:30px;margin-left:10px;margin-top:10px;" name="inputText"><br>
			</tr>
			<tr>
				<input type="button" style="margin-left:10px;margin-top:10px;" value="ADD" ng-click="$ctrl.addtext($event)">
			</tr>
			<tr>
				<td>
					<div id="outputDiv"></div>
				</td>
			</tr>
		</table>
	</form>
</script>
  
</div>

Edit 2 - updates to use jQuery syntax and pass $scope into $compile

add an ng-click and use $compile (make sure to include in controller)

ctrl.addtext = function () {
  var outputDiv = $('#outputDiv');
  var newRow = $compile("<a href='' style='margin-left:10px'>" + 'newtext ' + " <span ng-click='removeRow($event)'>X</span></a><br>")($scope);
  newRow.appendTo(outputDiv)
};

create function

I'm not sure exactly what element you wanted to remove.

ctrl.removeRow = function(e) {
  e.preventDefault();
  e.target.parentNode.remove();
};

Code Snippet

There may be differences in how you are writing your components/controllers.

angular.module('myApp', [])
  .controller('myController', function ($scope, $compile) {

    $scope.addText = function () {
     var outputDiv = $('#outputDiv');
     var newRow = $compile("<a href='' style='margin-left:10px'>" + 'newtext ' + " <span ng-click='removeRow($event)'>X</span></a><br>")($scope);
     newRow.appendTo(outputDiv)
   };
   
   $scope.removeRow = function(e) {
     e.preventDefault();
     e.target.parentNode.remove();
   };


  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
 
  
  <button ng-click="addText($event)">add text</button>
  
  
  <div id="outputDiv"></div>
</div>

edited Mar 7, 2018 at 22:22

answered Mar 6, 2018 at 23:55

Matthew Moran

1,49712 silver badges22 bronze badges

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

10 Comments

manishk Over a year ago

ng-click="$ctrl.removeRow($event)" gives me an error because of the double quotes I suppose. Replaced that with single quotes and added a console.log message inside the function, but did not get that displayed on clicking the X.

Matthew Moran Over a year ago

Did you function include preventDefault?

manishk Over a year ago

yes it does.. my editor shows that there is a syntactic error as i include $ctrl.removeRow($event) inside the double quotes

Matthew Moran Over a year ago

Maybe this will help. stackoverflow.com/questions/19267979/…

Matthew Moran Over a year ago

I think the issue is related to compiling.

|

kaushik94 · Accepted Answer · 2018-03-06 23:54:50Z

0

You can use the $event property in angular or something like a html-5 data attribute to retrieve the info of the clicked element. Roughly your code would look like this:

HTML:

<input type="button" value="ADD" ng-click="$ctrl.addtext($event)">

and JS

ctrl.addtext = function (event) {
    var clickedElem = document.getElementById(event.target.id);
    // do whatever you want with the element.
    var div = document.getElementById('outputDiv');
    div.innerHTML += "<a href='' style='margin-left:10px'>"+newtext+"</a><br>";
}

answered Mar 6, 2018 at 23:54

kaushik94

6876 silver badges18 bronze badges

Collectives™ on Stack Overflow

Click to delete dynamically created element in AngularJS

2 Answers 2

Edit 3

Edit 2 - updates to use jQuery syntax and pass $scope into $compile

Code Snippet

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit 3

Edit 2 - updates to use jQuery syntax and pass $scope into $compile

Code Snippet

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related