CODEWITHSUNDEEP
javascriptjquery
user1349526
user1349526

Reputation: 27

remove child div

I have list of divs, what i want to achieve is removing the child <div class="lol">999</div> , and replacing it with <div class="lol">111</div>.

I do know how to get the data-squares of both of them. I tried using $(this).removeClass('column div'); but it does not works well.

Visit http://jsfiddle.net/jm4eb/5/ before:

<div class="column" data-square="1-4">
<div class="green">999</div>
</div>


<div class="column" data-square="1-5">
<div class="blue">111</div>
</div>

after

<div class="column" data-square="1-4">

</div>


<div class="column" data-square="1-5">
<div class="green">999</div>
</div>

hi, this is how the application works. lets assume there are 10 div boxes which each having one inner box 12 , user clicks on one div and clicks on another. so the inner div of the second div clicked should be deleted, and replaced by the inner of div of first div click. but the outer divs only unique field they have is data-square . Visit http://jsfiddle.net/jm4eb/11/ so when inner div of first div will go instead of the inner div of the second div clicked .the inner div of second div is deleted before the replace

Upvotes: 0

Views: 662

Answers (2)

Florian Margaine
Florian Margaine

Reputation: 60717

What about changing the text value instead of deleting then creating a new one?

$( '.column' ).each( function () {

    // Save $( this ) and $( this ).next() since we're going to use them multiple times
    var self = $( this ),
        next = self.next()

    // For each of them, save the firstChild's text
    var val = self.children().first().text()

    // Now, check if the next DIV exists
    if ( next ) {

        // If it does, change the text of its first child with the "val" variable
        next.children().first().text( val )
    }
} )

Edit: replaced .find( '>:first-child' ) with .children().first(). Can't believe jQuery doesn't have a method to shim firstElementChild.

@Esailija also thought that this method missing was weird. So he created a jQuery plugin. Which means I could use self.firstChild().text() instead of self.children().first().text().

Upvotes: 2

DACrosby
DACrosby

Reputation: 11440

If I understand correctly, you want to place the content of the div users first click on intio the second div they click on. Since you already have the dv in question selected (via their click) and you have the data-square of it, it's just a matter of copying the html. For example: http://jsfiddle.net/jm4eb/6/ If you want to empty the first div's content, simply add .html("") on the first click, or save the reference to the clicked div and run .html("") on the saved reference when they click a second time.

Did I miss something in your question?

Upvotes: 0

Related Questions