1

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?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
manishk
  • 526
  • 8
  • 26

2 Answers2

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>
Matthew Moran
  • 1,457
  • 12
  • 22
  • 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. – manishk Mar 07 '18 at 00:10
  • Did you function include `preventDefault`? – Matthew Moran Mar 07 '18 at 00:17
  • yes it does.. my editor shows that there is a syntactic error as i include $ctrl.removeRow($event) inside the double quotes – manishk Mar 07 '18 at 00:22
  • Maybe this will help. https://stackoverflow.com/questions/19267979/ng-click-not-working-from-dynamically-generated-html – Matthew Moran Mar 07 '18 at 00:24
  • I think the issue is related to compiling. – Matthew Moran Mar 07 '18 at 00:27
  • Ok I interchanged the double and single quotes and the syntax error is no more there.. but still when i click on the X it doesn't display the console.log message that I added to debug. Can you please add a fiddle if you don't mind – manishk Mar 07 '18 at 00:29
  • Not too keep you waiting, but I won't be able to until tomorrow. – Matthew Moran Mar 07 '18 at 00:32
  • no problem.. I think the problem is I'm unable to reach/call the function removeRow on clicking the X – manishk Mar 07 '18 at 00:39
  • Check my edit. Any reason why you are not using jQuery syntax? – Matthew Moran Mar 07 '18 at 01:16
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166370/discussion-between-manishk-and-mtmoran). – manishk Mar 07 '18 at 06:25
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>";
}
kaushik94
  • 687
  • 6
  • 17