Organize and eliminate items within a vessel

Looking to manipulate a container with span elements by removing two and re-arranging one. I attempted the following approach:

$('span.class5').insertBefore('span.class0');

However, this inserted each span.class5 into every repeating container on the page. What is the best way to accomplish this using jQuery?

HTML: 

 <div class="container">

 <div class="group">
    <span class="class0"></span>
    <span class="class1"></span>
    <span class="class2"></span>
    <span class="class3"></span>
  </div>

  <div class="group">
    <span class="class4"></span>
    <span class="class5"></span>
    <span class="class6"></span>
    <span class="class7"></span>
    <span class="class8"></span>
 </div>

</div>

Rearranged as follows: 

 <div class="container">

 <div class="group">
    <span class="class0"></span>
    <span class="class5"></span>
    <span class="class1"></span>
    <span class="class2"></span> = remove
    <span class="class3"></span> = remove
  </div>

  <div class="group">
    <span class="class4"></span>
    <span class="class6"></span>
    <span class="class7"></span>
    <span class="class8"></span>
 </div>

</div>
javascriptjqueryhtmlcss

Answer №1

Here is one possible solution using jQuery:
( with jQuery)

// Implementing the removal of two elements
$('.class2 , .class3' , '.group').remove();

// Placing each span.class5 within every repeating container
$('span.class5').each(function(){
  var $el = $(this);
  var $father = $el.parents('.container');
  
  //         If a class for the container is not preferred
  //         Uncomment the line below
  //var $father = $el.parent().parent();
  
  
  $el.insertAfter($father.find('.class0'))
});
span{
  border : solid 1px #EEE;
  display : inline-block;
  padding : 3px;
  margin : 3px;
  }

.container{
  border : solid 1px #CCC;
  padding 3px;
  margin : 3px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class="group">
    <span class="class0">0</span>
    <span class="class1">1</span>
    <span class="class2">2</span>
    <span class="class3">3</span>
  </div>

  <div class="group">
    <span class="class4">4</span>
    <span class="class5">5</span>
    <span class="class6">6</span>
    <span class="class7">7</span>
    <span class="class8">8</span>
  </div>
</div>
<div class='container'>
  <div class="group">
    <span class="class0">0</span>
    <span class="class1">1</span>
    <span class="class2">2</span>
    <span class="class3">3</span>
  </div>

  <div class="group">
    <span class="class4">4</span>
    <span class="class5">5</span>
    <span class="class6">6</span>
    <span class="class7">7</span>
    <span class="class8">8</span>
  </div>
</div>
<div class='container'>
  <div class="group">
    <span class="class0">0</span>
    <span class="class1">1</span>
    <span class="class2">2</span>
    <span class="class3">3</span>
  </div>

  <div class="group">
    <span class="class4">4</span>
    <span class="class5">5</span>
    <span class="class6">6</span>
    <span class="class7">7</span>
    <span class="class8">8</span>
  </div>
</div>
<div class='container'>
  <div class="group">
    <span class="class0">0</span>
    <span class="class1">1</span>
    <span class="class2">2</span>
    <span class="class3">3</span>
  </div>

  <div class="group">
    <span class="class4">4</span>
    <span class="class5">5</span>
    <span class="class6">6</span>
    <span class="class7">7</span>
    <span class="class8">8</span>
  </div>
</div>

Answer №2

To target specific elements within a container, you can utilize the parent > child selector:

function customizeLayout(num) {
  $('.container' + num + ' > .group > .class2').remove();
  $('.container' + num + ' > .group > .class3').remove();
  $('.container' + num + ' > .group > .class5').insertBefore($('.container' + num + ' > .group > .class0'));
}
.group {
  background-color: lightgray;
  margin: 4px
}
.group span {
  margin: 3px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
  <div class="group">
    <span class="class0">0</span>
    <span class="class1">1</span>
    <span class="class2">2</span>
    <span class="class3">3</span>
  </div>
  <div class="group">
    <span class="class4">4</span>
    <span class="class5">5</span>
    <span class="class6">6</span>
    <span class="class7">7</span>
    <span class="class8">8</span>
  </div>
  <button onclick="customizeLayout(1)">Customize Layout</button>
</div>
<div class="container2">
  <div class="group">
    <span class="class0">0</span>
    <span class="class1">1</span>
    <span class="class2">2</span>
    <span class="class3">3</span>
  </div>
  <div class="group">
    <span class="class4">4</span>
    <span class="class5">5</span>
    <span class="class6">6</span>
    <span class="class7">7</span>
    <span class="class8">8</span>
  </div>
  <button onclick="customizeLayout(2)">Customize Layout</button>
</div>

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

Avoiding interference with adjacent elements caused by long content in a div

Hey there, I could really use some help with my CSS layout, I'm pretty new to CSS and Flexbox and I'm trying to create a simple layout. The issue I'm running into is how to stop long content inside a pre tag from pushing other divs. Here& ...

htmlcssflexbox

Is my page not displaying correctly due to compatibility view?

My client "jordanzad.com" has a website where the main page design appears broken when viewed in compatibility view. Can you help fix this issue? ...

htmlcss

Passing the onChange event in React to a nested child component

The code snippet below illustrates a scenario where the user encounters an error: import React from 'react'; import {render} from 'react-dom'; import Form from './form.jsx'; import axios from 'axios'; class App e ...

javascriptreactjs

Guidance on Implementing a Delay and FadeIn Effect for AJAX Responses from JSON Iterator

How can I iterate over the following foreach loop with a delay between each item and a fadeIn effect on each? I am debating whether .append() is the most suitable function to use since I want to load a templated div with the class #fan for each person in ...

javascriptjqueryajax

Encountering difficulty in creating a Nuxt website using @googlemaps/js-api-loader

While using the @googlemaps/js-api-loader in my Nuxt 3 website, I encountered an issue. Everything worked perfectly during local development. However, when I attempted to build the project with nuxt generate (whether locally or on Vercel), I received the f ...

javascriptvue.jsgoogle-mapsnuxt.jsvercel

Unsynchronized AJAX POST requests fail to function effectively

I am encountering an issue with an AJAX call that I am using to log in a user. Here is the code: function loginUser() { var xmlhttp; if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest() ...

javascriptajaxpostasynchronous

Create eye-catching banners, images, iframes, and more!

I am the owner of a PHP MySQL website and I'm looking to offer users banners and images that they can display on their own websites or forums. Similar to Facebook's feature, I want to allow users to use dynamic banners with links. This means the ...

phpjavascriptmysqlbanner

Regular Expression designed specifically for detecting alternative clicks

When using ngpattern for validation, I have encountered an issue where my error message is displaying for a different reason than intended. The error message should only show if the field is empty or contains only special characters. <textarea name="ti ...

javascriptjqueryangularjsregex

What method does Apple use to apply overflow:hidden to elements within position:fixed?

After conducting my own experiments and delving into the topic online, I discovered that elements using position: fixed do not adhere to the overflow: hidden property of their parent element. This also applies to children within the fixed positioned elemen ...

htmlcssoverflowcss-position

Having trouble with AES decryption on my nodeJS/ExpressJS server backend

Looking to decipher data post retrieval from mongoDb. The retrieved data comprises encrypted and unencrypted sections. app.get("/receive", async (req, res) => { try { const data = await UploadData.find(); const decryptedData = data. ...

javascriptexpressnext.jsaes

Prevent external scrolling while Bootstrap modal is active

<div class="modal mt-5p" role="dialog" [ngStyle]="{'display':IONotes}"> <div class="modal-dialog modal-md mt-0px width-70p"> <div class="modal-content" style="height:500 ...

javascriptangulartypescriptbootstrap-4

Creating Structure with Highcharts - Sorting Through Unprocessed Data

In reviewing various demos of highcharts, I noticed that they all tend to adhere to a fairly straightforward data structure: Categories,Apples,Pears,Oranges,Bananas John,8,4,6,5 Jane,3,4,2,3 Joe,86,76,79,77 Janet,3,16,13,15 However, the data I have doesn ...

javascripthighcharts

What is the reason for the output being [['a', 'b']], as opposed to [['a','b'],['c','d']]?

I've been working on the freecodecamp Bonfire: Chunky Monkey problem and I'm almost there with the solution. However, I'm stuck on why the output is [['a', 'b']], instead of [['a', 'b'], ['c' ...

javascriptarrays

Tips for creating a POST request using mongoose in NextJS version 13.4

Currently, I am faced with the challenge of executing a POST request using mongoose in NextJS. In my project structure, I have three key files: lib/dbConnect.js, models/User.js, and app/new/route.ts. As defined, app/new/route.ts is responsible for handling ...

javascriptmongodbmongoosenext.jsnext.js13

Bootstrap arranges checkboxes into three evenly spaced columns and centers them within a form

Having trouble organizing my checkboxes into 3 columns and centering them within the form perfectly. Current layout: Click here for image Desired look: Click here for image HTML: ` <form action="/signup" method="POST" ...

htmlcsscheckboxbootstrap-4

Tips for utilizing the date-formatter feature of bootstrap-table with Angular 2

Hello there! I have integrated the bootstrap-table library with Angular4, but I am facing an issue with the date-formatter feature. Here is the HTML code snippet: <table id="table" data-show-refresh="true" data-show-toggle="true" data-show-columns="tr ...

javascriptangularbootstrap-table

Learn how to seamlessly update broken images on a webpage with a placeholder error image using the MooTools 1.2 framework

Currently working on a project with PHP, MySQL and utilizing Mootools 1.2 as the JavaScript framework. I am trying to find a way for all broken images to automatically be replaced with a designated error image. Any suggestions on how I can achieve this? ...

phpjavascriptmysqlmootools1.2

Guide on adjusting canvas height to match Full Document height (covering entire page)

Hello everyone, I'm getting in the holiday spirit by adding some snow falling effects using Canvas and it looks pretty awesome. The only issue is that it's filling up the entire screen due to: c.width = innerWidth; c.height = innerHeight; If a ...

jqueryhtmlcsscanvas

Tips on displaying an avatar above and outside the boundaries of a background element using Chakra UI

They say a picture is worth more than a thousand words, and in this case, it holds true. The best way to illustrate what I'm trying to accomplish is through the image linked below. https://i.stack.imgur.com/5WvkV.png I envision having the avatar po ...

htmlcssreactjsuser-interfacechakra-ui

ASP.NET user control cannot locate hidden field

In an asp.net usercontrol (.ascx) that contains an HTML hidden field, there are some issues to address. <input id="HiddenField1" type="hidden" runat="server" /> When the user control triggers a HTML pop-up window, users input values which are then ...

javascriptasp.nethtml