What is the best way to remove an entire span element that contains contenteditable spans within it?

The issue I'm facing involves a contenteditable div. Inside, there is a span for a 'fraction', following guidance from this source. Below is my current code snippet:

<span style="display:inline-block; vertical-align:middle;" contenteditable="false">
  <span style="display:block; min-width: 20px;border-bottom:1px solid black; text-align: center; outline: none;" contenteditable>6</span>
  <span style="display:block; min-width: 20px;text-align: center;outline: none;" contenteditable>7</span>
</span>

I am encountering an issue when attempting to delete the 'fraction' span. Instead of removing the entire span with its contents, only the inner contenteditable spans are deleted. I want all three elements to be removed when deleting the outer span (as this program deals with Math). How can I achieve this?

UPDATE: Alternatively, if it's not possible to delete the outer span and its children simultaneously, is there a way to select the entire span element along with its contents by pressing the delete key next to the big fraction span?

javascriptjqueryhtmlcsscontenteditable

Answer №1

To make the top span easily identifiable, assign it an id:

<span id="editfraction" 
      style="display:inline-block; vertical-align:middle;" 
      contenteditable="false">

Here's how you can remove it using jQuery:

$('#editfraction').remove();

If you prefer to delete the span when the user clicks a delete button, you can use ids along with data attributes on the contentEditable spans.

<span ... data-ondeleteId="#editx" contenteditable>6</span>

Check out this jsfiddle link for a visual example

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

Observables in Knockout.js vanish after being bound

I'm encountering a peculiar issue with my Knockout script. Here is the viewModel: viewModel = { viewShown: function () { if (params.id !== undefined) timer = setInterval(loadVorgangsdetails, 100); else { $( ...

javascriptjsonknockout.jssignalrdevextreme

Instructions for adding a unique custom external CSS link, such as Bootstrap CSS, to a specific REACT component

Is it possible to incorporate custom CSS from the Bootstrap website into a React component? Since this CSS file cannot be imported directly, what steps should I take to include it? <link href="https://getbootstrap.com/docs/4.5/dist/css/bootstrap. ...

javascriptcssreactjs

Changing a complex array structure in javascript into a CSV format

I have a complex nested array that I need to convert into a downloadable CSV file. My current approach involves iterating through each array and subarray to build the CSV, but I'm wondering if there's a more efficient method available? Here is a ...

javascriptreactjsarraystreeexport-to-csv

pressing the downward arrow does not cause the number to decrease

I'm facing an issue with my code in this video. The increment is working when the upward arrow is clicked, but not the decrement. I suspect there's a problem with the jQuery code. Initially, I tried modifying from top to bottom, and changing +1 t ...

javascriptjquery

Passing a variable from a service to a controller in AngularJS

I recently developed a basic app that includes user authentication based on the guidelines found in this useful resource. The core components of my app are a userAccountService, which manages communication with the server, and a login controller that over ...

javascriptangularjs

What is the best way to show the selected values of dropdown and checkboxes on a redirected page for confirmation using PHP?

<form action="action.php" method="POST" target="_self"> <table class="main" border="1" height="100%" align="center">t; <h3> <p id="id1" style="background-color: #9FF" >Registration form</p></h3> <tr><t ...

phphtml

The Joomla jCE popup feature is not functioning properly when used with AJAX content

Currently, I am using Joomla for my project. One of the features I have implemented is Ajax to display a specific section on a page. Within this Ajax-loaded section, there is a JCE popup link included in the code: <a href="some link" class="jcepopup no ...

javascriptajaxjoomlapopup

Aligning images and input fields vertically with relative measurements

I'm looking for a way to vertically position two images, one on the left and one on the right, so that they are centered between labels and input fields within a containing div. Is it achievable using only relative lengths? Check out this jsfiddle fo ...

cssvertical-alignment

Ways to implement form validation with JavaScript

I'm currently working on a project for my digital class and I'm facing an issue with my booking form. I have two functions that need to execute when a button is clicked - one function validates the form to ensure all necessary fields are filled o ...

javascriptformsvalidation

When working with Vue in Laravel, the console may show that app.message is returning undefined

Recently, I embarked on my journey to learn Vue and have been closely following their introductory guide. However, I seem to be facing a hurdle at this point: Simply open your browser’s JavaScript console and adjust app.message to a different value. I ...

javascriptphplaravelvue.jslaravel-5

Unable to invoke a function in JavaScript

When I try to create a user in the database by calling the function createOne inside createProfile, it seems like the function is not getting executed. Even though the route is functioning properly, I'm facing an issue with calling a function within a ...

javascriptmongodbexpress

Issue regarding the sidebar's top alignment

Having trouble with the positioning of this sidebar. It seems to be hanging slightly over the top edge instead of aligning perfectly with it. Here's how it looks: enter image description here. CSS CODE: https://pastebin.com/RUmsRkYw HTML CODE: https ...

htmlcssbrowsernavigationsidebar

Expand the HTML Template and Resize Children to Fit the Window

My software creates HTML email templates that typically range from 600px to 650px in width, but can sometimes be as wide as 900px. The templates have nested table elements for email clients, with all dimensions specified in fixed pixels rather than relativ ...

javascripthtmlmeta-tagsviewportemail-templates

Sending ng-model as an argument to a function along with another parameter, followed by resetting ng-model

This is an example of my HTML code: <input type="text" name="message" ng-model="senderMessage"> <button type="submit" ng-click="sendSenderMessage(1,5,senderMessage)"> Click Me </button> Here is my JavaScript controller function: $sc ...

javascriptangularjs

Leveraging Ajax for establishing session and displaying outputs

Trying my best to make this work with AJAX, but it's a new concept for me. So bear with me as I figure this out... I've posted a couple of questions about resolving the issue at hand and we've made progress. However, a new challenge has pre ...

javascriptphpjqueryhtmlajax

Is it possible to blend an established static HTML website with a fresh CMS site on the same domain name?

Our small society, cmyf.org.uk, has had a static html website for many years. We are now looking to incorporate blogging and other features into our site. Our main concern is whether we should create a new CMS site with a different domain name or if ther ...

htmlcontent-management-system

What are the steps to store and access state variables using session storage in a React application?

I am currently utilizing React version 18.2.0. In my application, I have a component called BodyComponent that stores the data retrieved from an API call in its state as results, along with some filter information in filters. The BodyComponent fetches the ...

javascriptreactjssession-storage

Retrieving the selected value from a dropdown menu without having to click on a

I'm facing an issue with 2 dropdown menus outside of an HTML table that is generated by PHP code. There's a submit button within this table, and here's how it's set up: <!doctype html> Select Year: ...

javascriptphpjqueryhtml

Unexpected response from ajax request

I am struggling to properly handle error messages in my jQuery ajax code. When the fetch array result from my ajax page contains data, I want to display an error message; however, when the array result is empty, I want nothing to happen. Unfortunately, my ...

phpjqueryajax

Stop the page from scrolling when a modal is displayed in React

I've encountered an issue with my custom modal component where the background stops scrolling when the modal is open. Initially, I attempted to solve this by using the following code: componentDidMount() { document.body.style.overflow = 'hi ...

javascriptreactjs