Curious about handling DOM elements in AngularJS, I came across a specific scenario in my View / Webpage
<div>
<p>I am some text or a comment or something</p>
<a href="" ng-click="deleteThisDiv()">X</a>
</div>
<div>
<p>I am some text but this Div may have more content like IMG or inputs</p>
<a href="" ng-click="deleteThisDiv()">X</a>
</div>
I'm looking to implement a method within the controller called deleteThisDiv that will remove the parent DIV of the clicked href along with its contents. While using jQuery seems like a straightforward solution by accessing the parent element and utilizing $target.remove(), I prefer to adhere to best practices in AngularJS development. Although jqLite supports $target.remove(), is there a more efficient way to achieve this without relying on traditional jQuery methods? Perhaps leveraging directives like ng-show/ng-hide? It's worth mentioning that while I can assign IDs to elements in the HTML, I aim to minimize cluttering the structure with unnecessary identifiers at this stage.
- In seeking an alternative approach, I'm eager to embrace the AngularJS methodology instead of defaulting to jQuery for such tasks. It should be noted that the HTML is static and does not involve dynamic generation through arrays or object iteration.