Delete the child node that matches the specified variable

Question

Delete the child node that matches the specified variable

I am facing the challenge of removing a list item node if it matches a specific variable. For example

If username is equal to User 1
And if a node is also User 1

Then I want to remove this particular node. Unfortunately, I have not been able to assign IDs to the nodes. Here is the code that creates the child nodes.

 $('#typing').append($('<li>').text(username + "is drawing..."));

And here is the part of the code where I am attempting to remove the target node.

if ($('<li>'.text == username + " is drawing...")){
           console.log("its the same!");
           $("<li>").remove();
           prev_username = "";
       }
    });

Even though the code prints out "its the same," the node is not being removed. If anyone could provide assistance with this issue, I would greatly appreciate it. Thank you :)

javascript html-lists

Answer 1

Answer №1

Your condition will always evaluate to true because it is checking a jQuery object, which is truthy regardless of how it has been created.

To target the specific li elements you are looking for, you can use a selector like contains.

var username = 'Jefferey John Smith';

$('#typing').append($('<li>').text(username + " is drawing..."));

$('button').click(function(){
    $('li:contains('+ username + ' is drawing...)').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="typing">
    <li>Musa is typing...
</ul>
<button>Clear Jefferey John Smith</button>

Answer 2

Your condition will always evaluate to true because it is checking a jQuery object, which is truthy regardless of how it has been created.

To target the specific li elements you are looking for, you can use a selector like contains.

var username = 'Jefferey John Smith';

$('#typing').append($('<li>').text(username + " is drawing..."));

$('button').click(function(){
    $('li:contains('+ username + ' is drawing...)').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="typing">
    <li>Musa is typing...
</ul>
<button>Clear Jefferey John Smith</button>

Delete the child node that matches the specified variable

Answer №1

Similar questions

Updating the background image without having to validate the cache

What could be causing my function to exclude only the final element of the array when it returns?

What is the best way to align HTML elements in a single row?

Save this text in HTML format to the clipboard without including any styling

The EJS view fails to render when called using the fetch API

Customizing File Size and Dimensions in Form Submission with Dropzone.js in JavaScript

Paste the results of a JavaScript function into an Excel spreadsheet (codenamed "assault")

Is it possible to merge JavaScript files exclusively using encore?

Discovering a solution to extract a value from an Array of objects without explicitly referencing the key has proven to be quite challenging, as my extensive online research has failed to yield any similar or closely related problems

setTimeout executes twice, even if it is cleared beforehand

Customizing response headers in vanilla Node.js

After using promise.all, I successfully obtained an array of links. Now, how do I calculate the total number of links in the array?

What is the simplest method for generating a datatable?

What is the most effective way to obtain a customer's latitude and location by prompting them to drop a pin on Google Maps?

Toggle between tabs by dynamically selecting radio buttons

Tips for concealing the Google Chrome status bar from appearing on a webpage

Encountering a 500 internal server error or receiving an error message stating "invalid value for stripe.confirmCardPayment

Revitalizing and rerouting page upon button click

Struggling with adding icons to the home screen in a Create React App?

The data from the Flickr API is consistently unchanging