Press here to remove an element that was generated dynamically within AngularJS

Question

Press here to remove an element that was generated dynamically within AngularJS

At this moment, any input entered by the user in the text box and then clicked on the button is dynamically displayed inside anchor tags, each in a new line.

Here's the HTML code for the text box and the button:

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

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

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

Below is the JS function being used:

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

Now, is there a way to include a close or remove button (such as an X) at the end of each dynamically generated anchor tag, that when clicked, removes that specific row only?

javascript angularjs

Answer 1

Answer №1

Custom Edit

Implementing a unique component syntax:

function modifyComponentCtrl ($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',[])
   .component('modifyComponent', {
  templateUrl: 'templateId',
  controller: modifyComponentCtrl
});

<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">
  <modify-component></modify-component>  
  
  
  <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>

Revamped Edit - jQuery Syntax and $scope Pass

Include an ng-click and utilize $compile within the 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 a new function

If unsure about the element to remove:

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

Code Fragment

There might be variations in writing 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>

Answer 2

Custom Edit

Implementing a unique component syntax:

function modifyComponentCtrl ($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',[])
   .component('modifyComponent', {
  templateUrl: 'templateId',
  controller: modifyComponentCtrl
});

<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">
  <modify-component></modify-component>  
  
  
  <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>

Revamped Edit - jQuery Syntax and $scope Pass

Include an ng-click and utilize $compile within the 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 a new function

If unsure about the element to remove:

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

Code Fragment

There might be variations in writing 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>

Answer 3

Answer №2

To capture information of the element clicked, you have options like using the Angular $event property or utilizing an HTML5 data attribute. Here is a basic example of how you can achieve this:

HTML:

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

and JavaScript:

ctrl.sendData = function (event) {
    var clickedElement = document.getElementById(event.target.id);
    // Perform actions with the element.
    var outputDiv = document.getElementById('outputDiv');
    outputDiv.innerHTML += "<a href='' style='margin-left:10px'>"+newData+"</a><br>";
}

Answer 4

To capture information of the element clicked, you have options like using the Angular $event property or utilizing an HTML5 data attribute. Here is a basic example of how you can achieve this:

HTML:

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

and JavaScript:

ctrl.sendData = function (event) {
    var clickedElement = document.getElementById(event.target.id);
    // Perform actions with the element.
    var outputDiv = document.getElementById('outputDiv');
    outputDiv.innerHTML += "<a href='' style='margin-left:10px'>"+newData+"</a><br>";
}

Press here to remove an element that was generated dynamically within AngularJS

Answer №1

Custom Edit

Revamped Edit - jQuery Syntax and $scope Pass

Code Fragment

Answer №2

Similar questions

What is causing my ajax request to malfunction?

Concealing a button once the collapse feature is toggled in Bootstrap

Steps to activate checkbox upon hyperlink visitation

Utilizing consistent form elements throughout various tabs

Exciting Update: Next.js V13 revalidate not triggering post router.push

Button inside a React JS Material UI autocomplete chips component

What is the best way to create a "tile-based board" for this game?

Retrieving data from radio buttons using React Hook Form

What is causing the TouchSwipe jQuery plugin not to function in my code?

What could be causing a tooltip to remain visible even after a mouseleave event in a React application

How can you initiate the wizard sequence again in TelegrafJS?

Updating data for a heatmap in Angular-Leaflet

What is the best way to change the state of an Object?

Filtering in JavaScript can be efficiently done by checking for multiple values and only including them if they are not

Issue with Vue-Multiselect: Unselecting a group of pre-loaded values is not functioning as expected

Issue with alert dismissal button not visible

Node.js and Express: accessing req.body yields undefined value

aligning JSON information with JavaScript object

The SVG format quickly displays new and larger datasets on line charts without any transition effects

loop failing to refresh element within array