Click to remove the parsed element

I'm working on a project with a parsed xml-file containing duplicate elements. I need to create a button that hides one of them when clicked using an onclick statement. Can someone help me achieve this?

<!DOCTYPE html>
<html>
  <body>

    <p id="dasa"></p>

    <script>
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
         myFunction(this);
        }
      };
      xhttp.open("GET", "customers.xml", true);
      xhttp.send();

      function myFunction(xml) {
         var xmlDoc = xml.responseXML;
         var x = xmlDoc.getElementsByTagName("syl");

         document.getElementById("dasa").innerHTML =
         x[0].getAttribute('category') + "<br>";

         document.getElementById("dasa").innerHTML +=
         x[0].getAttribute('category');
      }

      function remove() {
        x[0].removeAttribute('category');
      }
  </script>

  <button onclick="remove()">remove</button>

  </body>
</html>

Answer №1

x is not defined within the remove function.

function remove() {
   x[0].removeAttribute('category');
}

A more suitable approach would be:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
}
};
xhttp.open("GET", "customers.xml", true);
xhttp.send();

var xmlDoc;
var x;
function myFunction(xml) {
xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("syl");

document.getElementById("dasa").innerHTML =
x[0].getAttribute('category') + "<br>";

document.getElementById("dasa").innerHTML +=
x[0].getAttribute('category');
}

function remove() {
x[0].removeAttribute('category');
}

This modification will transform x into a global variable that is assigned by myfunction.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered while compiling NextJS: Unexpected use of single quotation mark in jsx-quotes

I can't seem to compile my NextJs 13 app without encountering errors. Take a look at my shortened eslintrc.js file below: module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', ...

What steps do I need to take to ensure NextJS stores my edits in VSCode?

I have attempted various troubleshooting steps such as changing file extensions from .js to .jsx, turning on Prettier for formatting upon saving, setting it as the default formatter, reloading and restarting the editor. However, the issue with not being ...

Opt for Jquery Over Traditional Functions for Retrieving Data from Tables

In the past, we have relied on JavaScript functions to transfer data from a table to perform various actions on that specific row. Consider the following example: <table class="table table-hover table-striped"> <thead> <tr> ...

Having trouble loading the .php file with my Ajax request

Attempting to retrieve data from the postcode.php file and display it in a #postcodeList div, but encountering issues as nothing happens. Upon inspecting the postcode.php file, it seems to be outputting all the correct information. var loadicecream = do ...

Discover the potential location of an element using jQuery's animate feature

Struggling to obtain the correct position of an element due to the length of my animation causing $(this).position().top to be calculated prematurely. Is there a way to predict the future position value of an element before it moves to that specific locat ...

The input field is failing to capture the final character entered

Is there a way to store all input files in a single object and use the information in a graph? Currently, when I enter the first character, it creates an empty object, so the last character I enter is not captured in the object. Any suggestions on how to ...

How to retrieve the value from a JSON object when the key is unknown in JavaScript

Here is the JSON file I'm working with: { "status": 200, "msg": "OK", "result": { "files": { "count": 1, "pUnJbKzql0f2": { "name": "How ...

Setting the focus on an input when updating a property in the Pinia store using Vue

When a component I have is clicked, it triggers a function in the store: <button @click="this.store.foo()"></button> Within the store, I am updating a specific property: state: () => ({ focusIn: false, }), actions: { foo() { ...

Determine the available time slots for reserving a resource

I am developing an application that displays the weekly availability (Monday-Sunday) of a bookable resource. Next to this calendar view, users can select: A) Length of desired booking slot (15 min/30 min/60 min) B) Time zone The time slots are based ...

Please disable zoom functionality on the website specifically for Android devices

Is there a way to disable the zoom feature on our website specifically for Android phones/devices without affecting iPhones? Perhaps targeting the Chrome browser on Android would be sufficient, but we should also verify the mobile screen size. ...

AngularJS's $filter directive and Javascript syntax

Attempted to extract specific data from a JSON file using $routeParams:id. Typically, I would use the following method: var eventId = $routeParams.eventId; $http.get('json/events.json') .success(function(data){ angular.forEach(data,functio ...

Use Object.assign to swap out the current state with a new

Why does the React component with state { key: bool } not omit the existing state key from the new state when a different option is clicked? Link to the code var SampleComponent = React.createClass({ getInitialState: function() { return {}; }, ...

Converting important information from elements in an Array into a string separated by commas

Which lodash method or function is best suited for extracting the ids from the array below and creating a comma-separated string out of them? var myArray = [ { tag: 'wunwun', id: 132 }, { tag: 'davos&apos ...

Is there a different alternative to @JavascriptInterface in Android WebView?

I understand how to invoke a Java method within JavaScript code using the @JavascriptInterface annotation. However, I am facing an issue when trying to determine which JS method should be called from Android. Currently, I am triggering an Android Dialog ...

The variable in my scope is not reflecting the changes in the HTML view

Here is my code for handling file attachments in AngularJS: $scope.attachments = []; $scope.uploadFile = function(files){ for(var i=0; i<files.length; i++){ $scope.attachments.push(files[i]); console.log($scope.attachments.length); } } ...

Error in custom class using vanilla JavaScript: "Error: Unable to assign innerHTML to an undefined property"

Apologies for the ambiguous title, but I am struggling to pinpoint the exact issue at hand... I'm essentially guessing my way through this problem. This marks my initial venture into creating a reusable Javascript class. Below is a simplified version ...

Responsive images in CSS3/HTML5 are designed to adapt to different

I am looking to implement responsive image sizing based on the webpage size. My images come in two different sizes: <img src="images/img1.jpg" data-big="images/img1.jpg" data-small="images/img1small.jpg" alt=""></img> The data-small image has ...

Assign the hidden field's value to be the same as the input field's value using JavaScript

This may seem like a silly question, but I'm really hoping to find the best answer. Here's my issue: I have an input field and a hidden field. How can I set the value of the input field to be the same as the value of the hidden field? <input ...

What is the best way to incorporate a progress bar animation into my notification?

Seeking assistance to implement an animated progress bar that changes colors gradually over time based on a variable [timer]. Can anyone lend a hand with this? Thank you! https://i.sstatic.net/lhgeF.png $(document).ready(function(){ window.addEvent ...

Problem with Angular: ng-show not constantly re-evaluating expression

Utilizing a variable named activeScope to manage the state and toggle between two forms. This variable updates its value when a tab is clicked, triggering changeScope. While the change in active states for the tab buttons registers correctly, the divs for ...