Πρόβλημα με την appendTo

[Gio123]

Καλησπέρα,

 

Έχω τον παρακάτω κώδικα

 $(function() {
     var iCnt=1;
                    
     $("#b1").on("click",function(){
     iCnt = iCnt + 1;
                        //alert(iCnt);
     document.getElementById("mybutton1").disabled = false;
     if(iCnt==4){
           document.getElementById("b1").disabled = true;    
      }
     $("#sortable").append( "<li class='default' id='Item_" + (iCnt) + "'style='cursor:pointer'></li>" );

    document.getElementById("item"+(iCnt)).style.display = "block";
          $("#item"+(iCnt)).appendTo("#Item_"+(iCnt));
    });
                    
   $("#mybutton2").on("click",function(e){
        iCnt = iCnt -1;
        $("#Item_2").remove();
       document.getElementById("item2").style.display = "none";
    });
});

Επίσης έχω 4 <div id="item1" style="display:none;">,<div id="item2" style="display:none;">,<div id="item3" style="display:none;">,<div id="item4" style="display:none;">

 

Κάθε φορά που πατάω το b1 δημιουργώ ένα <li> και σε αυτό το <li> βάζω το αντίστοιχο div με την εντολή appendTo.

Όταν όμως πατήσω το mybutton2 και αφαιρέσω το Item_2, όταν ξανά πατήσω το b1 για να το βάλω πάλι το item2 στο Item_2 για κάποιο λόγο η appendTo δεν το κάνει αυτό γιατί;

[pitogiro]

Αν κατάλαβα καλά τι κάνεις...

- πατάς το #b1

- iCnt = 2

- φτιαχνεις ενα <li id="Item_2">

- κανεις append το <div id="item2"> μεσα στο <li id="Item_2">

 

- πατας το #mybutton2

- iCnt = 1

- διαγράφεις το <li id="Item_2">

 

Εδώ διαγράφοντάς το αυτό, δεν διαγράφεται ταυτόχρονα και ότι παιδί έχει; Άρα και το <div id="item2">;

 

Έτσι όταν ξαναπατήσεις το #b1 η appendTo δεν λειτουργει επειδή δεν υπάρχει πλέον το <div id="item2">.

 

Έχω καιρό να ασχοληθώ με javascript, αλλα αν δεν κάνω λάθος κάτι τέτοιο συμβαίνει...

[Gio123]

Ναι αλλά το <div id="item2"> το έχω όπου μέσα περιέχει διάφορα input..και απλά το έχω style="display:none;" και κάθε φορά που πατάω το b1 το κάνω block τι πρέπει να αλλάξω δηλαδή; 

[nucleus]

Αρχικά το ul sortable είναι άδειο? και από κάτω έχεις μια λίστα με τα <div id="item1" style="display:none;">,<div id="item2" style="display:none;">,<div id="item3" style="display:none;">,<div id="item4" style="display:none;">?

[Gio123]

Αρχικά μέσα στο ul έχω αφήσει μόνο μέσα σε ένα <li> το Item_1 και τα άλλα τα έχω μέσα σε div όπως έγραψες παραπάνω.Δημιουργώ τα <li> και βάζω ένα div κάθε φορά μέσα. Τό θέμα είναι ότι καθώς τα δημιουργώ μετά το remove δεν μου εμφανίζονται πάλι τα <div id="item1" style="display:none;">,<div id="item2" style="display:none;">,<div id="item3" style="display:none;">,<div id="item4" style="display:none;">.

[pitogiro]

Ουσιαστικά θες να διαγράψεις το li αλλά να κρατησεις τα παιδιά του (το div και οτι αυτο περιεχει), αν καταλαβαινω, και να τα αποκρύψεις θέτοντας το display σε none.

Ρίξε μια ματιά σε αυτό, στην πρώτη απάντηση.

Με βάση αυτό, η αλλαγή που μάλλον θα θες να κάνεις είναι στη θέση του 

$("#Item_2").remove();

να βάλεις τις γραμμές 

var cnt = $("#Item_2").contents();
$("#Item_2").replaceWith(cnt);

 

Για κάνε μια δοκιμή μήπως σου κάνει αυτό..

[nucleus]

https://api.jquery.com/appendto/

We can also select an element on the page and insert it into another:

1$( "h2" ).appendTo( $( ".container" ) );

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned.

MOVED to the target. Άρα όταν κάνεις το $("#item"+(iCnt)).appendTo("#Item_"+(iCnt)); Αφαιρεί το div από την λίστα των div και το μεταφέρει κάτω από το κατάλληλο <li>. Έτσι όταν το αφαιρείς στην ουσία το χάνεις.

[Gio123]

Μια χαρά παιδιά 

 

Ευχαριστώ.

[Gio123]

Τελικά τα προβλήματα δεν τελειώνουν ποτέ. Ενώ όλα τα άλλα με τα append και την appendTo δουλεύουν μια χαρά έχει προκύψει ένα πρόβλημα με το sortable της <ul>. Κάθε φορά που κάνω 

$("#sortable").append( "<li class='default' id='Item_" +(iCnt) + "'style='cursor:pointer'></li>" );
document.getElementById("item"+(iCnt)).style.display = "block";
$("#item"+(iCnt)).appendTo("#Item_"+(iCnt)).hide().fadeIn(500); 

όταν θέλω  αλλάξω σειρά(sortable) στα <li> που δημιουργώ, η αλλαγή μπορεί να γίνει και όταν κάνω κλικ πάνω στο <div  item1>. Δηλαδή μέσα στο <div item1> έχω μια πρόταση και πατήσω πάνω εκεί για να αλλάξω σειρά, τότε το <div> με το <li> χωρίζονται χωρίς να γίνεται η αλλαγή μαζί  με το <li> και το <div>. Ενώ άμα δεν πατήσω πάνω στο <div> τότε το sortable γίνεται μια χαρά. Καμία ιδέα για το πως μπορώ να φτιάξω.

 

Εχαριστώ.